jQuery effect on title WordPress
- SOLVED
Hi there.
I am developing a theme (working demo at http://jagst3r15.com ) that I hope to submit to wordpress.org, but am struggling with the jQuery. I am trying to add a cool effect on the title like this http://www.elegantthemes.com/demo/?theme=Lucid . I need the title to be hidden initially but slide in nicely from the right when someone hovers over the image (that is what the elegantthmes example is for, to show the little slide effect). The final product will be something like this http://thealpinepress.com/demo/cascade/ BUT not exactly, since I am not showing an excerpt or anything. All of the stuff is happening in my home.php file (http://pastie.org/4617501) but I know I'll need to enqueue the js file with the jquery and add some css. I would appreciate it if we could get the basic jquery nailed down as I can worry about the CSS.
- James
Answers (2)
Martin Pham answers:
Hello there,
Please try this file (home.php) and wait me build script to run it
[[LINK href="http://pastie.org/4617549"]]http://pastie.org/4617549[[/LINK]]
Jagst3r21 comments:
Okay I will wait for the script :)
Jagst3r21 comments:
Just letting you know that I will try your script too before i choose the winner. Will give you a fair chance :)
Martin Pham comments:
done :)
Please try this (home.php) . You can find inline script on line 29
<?php
/**
* The main template file.
*
* This is the most generic template file in a WordPress theme
* and one of the two required files for a theme (the other being style.css).
* It is used to display a page when nothing more specific matches a query.
* E.g., it puts together the home page when no home.php file exists.
* Learn more: http://codex.wordpress.org/Template_Hierarchy
*
* @package Waterfall
* @since Waterfall 1.0
*/
get_header(); ?>
<div id="primary" class="site-content">
<div id="content" role="main">
<?php if ( have_posts() ) : ?>
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<a class="hoverme rounder" href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?><span class="rtitle"><?php the_title(); ?></span></a>
<?php endwhile; ?>
<br style="clear:both;" />
<script type="text/javascript">
jQuery(document).ready(function ($) {
$(".hoverme").each(function () {
$(this).hover(function() {
$(this).children('.rtitle').css( { 'display' : 'block', left: '-'+ $(this).width(), 'opacity' : 0 } ).stop( true, true ).animate( { left: 0 , opacity: 1 }, 1000 );
}, function () {
$(this).children('.rtitle').hide('slow');
});
});
});
</script>
<?php waterfall_content_nav( 'nav-below' ); ?>
<?php elseif ( current_user_can( 'edit_posts' ) ) : ?>
<?php get_template_part( 'no-results', 'index' ); ?>
<?php endif; ?>
</div><!-- #content -->
</div><!-- #primary .site-content -->
<?php get_footer(); ?>
this CSS
.rounder {
position: relative;
display: block;
overflow: hidden;
width: 307px;
height: 205px;
margin: 0 5px 10px 0;
float: left;
border: 1px solid #E5E5E5;
padding: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.rounder .rtitle {
position: absolute;
bottom: 0;
right: 0;
background: rgba(11, 11, 11, .9);
padding: 3px 5px;
display: none;
margin: 3px;
}
For example:[[LINK href="http://marxvn.com/demo/demo_wpqs7169.html"]] http://marxvn.com/demo/demo_wpqs7169.html[[/LINK]]
Martin Pham comments:
it can work on IE 6-7-8 (do not support css3)
Jagst3r21 comments:
wow that is EXACTLY what I was looking for. Thanks Martin.
Jatin Soni answers:
You need jquery? because this can be done with css 3. I can help you in both way just let me know your choice
Jagst3r21 comments:
I'd like to do with jquery. I know it can be done with CSS3 but not really looking for that :)
Jatin Soni comments:
Try this code...
<strong>This is your hone.php</strong>
<?php
/**
* The main template file.
*
* This is the most generic template file in a WordPress theme
* and one of the two required files for a theme (the other being style.css).
* It is used to display a page when nothing more specific matches a query.
* E.g., it puts together the home page when no home.php file exists.
* Learn more: http://codex.wordpress.org/Template_Hierarchy
*
* @package Waterfall
* @since Waterfall 1.0
*/
get_header(); ?>
<div id="primary" class="site-content">
<div id="content" role="main">
<?php if ( have_posts() ) : ?>
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<div class="thumb-box">
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?><span class="title-text"><?php the_title(); ?></span></a>
</div>
<?php endwhile; ?>
<?php waterfall_content_nav( 'nav-below' ); ?>
<?php elseif ( current_user_can( 'edit_posts' ) ) : ?>
<?php get_template_part( 'no-results', 'index' ); ?>
<?php endif; ?>
</div><!-- #content -->
</div><!-- #primary .site-content -->
<?php get_footer(); ?>
<strong>Add this css to your style.css</strong>
.thumb-box{
position:relative;
}
.thumb-box .attachment-post-thumbnail{
}
.thumb-box .title-text{
position:absolute;
right:-100%;
bottom:5px;
padding:5px 2px;
display:inline-block;
background:rgba(255,255,255,0.85);
color:#000;
-moz-transition:all ease-in-out 0.3s;
-webkit-transition:all ease-in-out 0.3s;
-o-transition:all ease-in-out 0.3s;
transition:all ease-in-out 0.3s;
}
.thumb-box:hover .title-text{
right:0;
-moz-transition:all ease-in-out 0.3s;
-webkit-transition:all ease-in-out 0.3s;
-o-transition:all ease-in-out 0.3s;
transition:all ease-in-out 0.3s;
}
You may required little changes according to your template style. If you getting any issue provide me access I will fix it in your theme directly
Jagst3r21 comments:
any way we can do this with jquery instead? I appreciate your help alot :)