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?


 
Prev Previous Post   Next Post Next
  #1  
Old Dec 3, 2012, 03:14 AM
francoise
 
3 posts · Dec 2012
where do i have to insert a javascript/jquery script to run an css 3 effect?

Hello
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:
Code:
<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>
</ul>
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"

Code:
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');
In ATAHUALPA/OPTIONS:


in HTML INSERTS:
HEADER:
Code:
<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):

Code:
<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(); } );

			});
		</script>
CSS INSERTS:
Code:
/*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 05:33 AM.
 

Bookmarks

Tags
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 02:18 PM
Want a javascript driven Home page "menu" -- jQuery example available Zorba Customization, Design, Programming... 1 Sep 22, 2011 06:01 AM
[SOLVED] Custom Javascript/jQuery Popup not working in Atahualpa. Factorfiction Page & Category Menu Bars 1 Jan 30, 2011 02:20 PM
jquery Expand Table Rows - where to insert code lrosenshine Atahualpa 3 Wordpress theme 0 May 10, 2010 02:27 PM
Where to insert code for jquery plugins ? twola Header configuration & styling 3 Jan 23, 2010 11:18 PM


All times are GMT -6. The time now is 06:32 AM.


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