Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Center area post/pages »

where do i have to insert a javascript/jquery script to run an css 3 effect?

Old Dec 3, 2012, 04:14 AM
3 posts · Dec 2012
I want to integrate an jquery hover on some images in a page in atahualpa, the hover should look like this page: "http://tympanus.net/TipsTricks/Direc...reHoverEffect/".
I'm working on a localhost, so i can't give you a link for the site. My Problem is, that i don't know where i have to put the scripts in atahualpa/wordpress.
So what did i wrong? I try this:
CODE on page:
<ul id="da-thumbs" class="da-thumbs">
	<li><a  href="http://localhost/wochentage/januar/"> <img src="http://localhost/wochentage/wp-content/uploads/2012/11/1.jpg" alt="" /> </a>
<div><span> Januar </span></div></li>
	<li><a  href="http://localhost/wochentage/februar/"> <img src="http://localhost/wochentage/wp-content/uploads/2012/11/2.jpg" alt="" /> </a>
<div><span> Februar </span></div></li>
	<li><a  href="http://localhost/wochentage/maerz/"> <img src="http://localhost/wochentage/wp-content/uploads/2012/11/3.jpg" alt="" /> </a>
<div><span> März </span></div></li>
	<li><a  href="http://localhost/wochentage/apri/"> <img src="http://localhost/wochentage/wp-content/uploads/2012/11/4.jpg" alt="" /> </a>
<div><span> April </span></div></li>
	<li><a  href="http://localhost/wochentage/mai/"> <img src="http://localhost/wochentage/wp-content/uploads/2012/11/5.jpg" alt="" /> </a>
<div><span> Mai </span></div></li>
	<li><a  href="http://localhost/wochentage/juni/"> <img src="http://localhost/wochentage/wp-content/uploads/2012/11/6.jpg" alt="" /> </a>
<div><span> Juni </span></div></li>
	<li><a  href="http://localhost/wochentage/jul/"> <img src="http://localhost/wochentage/wp-content/uploads/2012/11/7.jpg" alt="" /> </a>
<div><span> Juli </span></div></li>
	<li><a  href="http://localhost/wochentage/augus/"> <img src="http://localhost/wochentage/wp-content/uploads/2012/11/8.jpg" alt="" /> </a>
<div><span> August </span></div></li>
	<li><a  href="http://localhost/wochentage/septembe/"> <img src="http://localhost/wochentage/wp-content/uploads/2012/11/9.jpg" alt="" /> </a>
<div><span> September </span></div></li>
	<li><a  href="http://localhost/wochentage/oktober/"> <img src="http://localhost/wochentage/wp-content/uploads/2012/11/10.jpg" alt="" /> </a>
<div><span> Oktober </span></div></li>
	<li><a  href="http://localhost/wochentage/november/"> <img src="http://localhost/wochentage/wp-content/uploads/2012/11/11.jpg" alt="" /> </a>
<div><span> November </span></div></li>
	<li><a  href="http://localhost/wochentage/dezember/"> <img src="http://localhost/wochentage/wp-content/uploads/2012/11/12.jpg" alt="" /> </a>
<div><span> Dezember </span></div></li>
I need 3 scripts + jquery vers. 1.8.3

I put the script "jquery.hoverdir.js" in Wordpress wp-includes/js/jquery/
I put the script "modernizr.custom.97074" in atahualpa373/js
i put the script "noJS.css" in atahualpa373/css

In ata FUNCTION.PHP i insert (just after this script:"// Since 3.6: Include Javascripts here and with wp_enqueue instead of header.php"

add_action( 'wp_print_scripts', 'add_my_scripts', 100 );
function add_my_scripts() {
if ( !is_admin() ) {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', ( 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' ), false, null, true );
wp_enqueue_script( 'jquery' );
wp_register_script( 'hoverdir', 'http://localhost/wochentage/wp-includes/js/jquery/jquery.hoverdir.js');
wp_enqueue_script( 'hoverdir' );
} }
add_action('init', 'add_my_scripts');

<script src="http://localhost/wochentage/wp-content/themes/atahulpa373/js/modernizr.custom.97074.js"></script>
        <noscript><link rel="stylesheet" type="text/css" href="http://localhost/wochentage/wp-content/themes/atahulpa373/css/noJS.css"/></noscript>

BODY BOTTOM (I also tried this with "jquery" instead of "$" with no result):

<script type="text/javascript" src="http://localhost/wochentage/wp-includes/js/jquery/jquery.hoverdir.js"></script>	
		<script type="text/javascript">
			$(function() {
				$(' #da-thumbs > li ').each( function() { $(this).hoverdir(); } );

/*Grösse des gesamten Rahmens*/
.da-thumbs {
	list-style: none;
	width: 800px;
	height: 800px;
	position: relative;
	margin: 20px auto;
	padding: 0;
.da-thumbs li {
	float: left;
	margin: 5px;
	background: #fff;
	padding: 8px;
	position: relative;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);

.da-thumbs a{
	color: #FF0;
	text-decoration: none;
.da-thumbs li a,
.da-thumbs li a img {
	display: block;
	position: relative;
.da-thumbs li a {
	overflow: hidden;
.da-thumbs li a div {
	position: absolute;
	background: #333;
	background: rgba(75,75,75,0.7);
	width: 100%;
	height: 100%;
.da-thumbs li a div span {
	display: block;
	padding: 10px 0;
	margin: 40px 20px 20px 20px;
	text-transform: uppercase;
	font-weight: normal;
	color: rgba(255,255,255,0.9);
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
	border-bottom: 1px solid rgba(255,255,255,0.5);
	box-shadow: 0px 1px 0px rgba(0,0,0,0.1),0 -10px 0 rgba(255,255,255,0.3);
every help would be fantastic!

Last edited by francoise; Dec 3, 2012 at 06:33 AM.


css3, javascript, jquery

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
Thread Thread Starter Forum Replies Last Post
jQuery Post Slider....where to put javascript files theadventurebite Center area post/pages 0 Sep 15, 2012 03:18 PM
Want a javascript driven Home page "menu" -- jQuery example available Zorba Customization, Design, Programming... 1 Sep 22, 2011 07:01 AM
[SOLVED] Custom Javascript/jQuery Popup not working in Atahualpa. Factorfiction Page & Category Menu Bars 1 Jan 30, 2011 03:20 PM
jquery Expand Table Rows - where to insert code lrosenshine Atahualpa 3 Wordpress theme 0 May 10, 2010 03:27 PM
Where to insert code for jquery plugins ? twola Header configuration & styling 3 Jan 24, 2010 12:18 AM

All times are GMT -6. The time now is 12:38 PM.

Powered by vBulletin® Copyright ©2000 - 2023, Jelsoft Enterprises Ltd.