|
JavaScript - Nivo Slider - Ie Issue
Hi Guys,
I'm developing a site (thenativedrum.com/charisbel) with the Nivo Slider. It works fine on Chrome and Firefox - but for some reason, when opened in IE7, the images fail to load. I'm sure this is a quick fix. I'm just stumped though! Does anyone know why this is happening? Thanks in advance Similar TutorialsFollowing is my code on Nivo Slider plugin. Code: <script type="text/javascript" language="javascript">
var jQuery = $.noConflict();
jQuery(window).load(function() {
jQuery('#slider').nivoSlider({
effect:'<?php if (($effect) <> "" ) { echo (($effect)); } else { echo 'random'; } ?>', //Specify sets like: 'random,fold,fade,sliceDown'
slices:<?php if (($slices) <> "" ) { echo (($slices)); } else { echo '15'; } ?>,
animSpeed:<?php if (($animspeed) <> "" ) { echo (($animspeed)); } else { echo '700'; } ?>,
pauseTime:<?php if (($pauseTime) <> "" ) { echo (($pauseTime)); } else { echo '3000'; } ?>,
startSlide:0, //Set starting Slide (0 index)
directionNav:true, //Next and Prev
directionNavHide:<?php if (($directionNavHide) <> "" ) { echo stripslashes(($fadin)); } else { echo 'false'; } ?>, //Only show on hover
controlNav:true, //1,2,3...
controlNavThumbs:false, //Use thumbnails for Control Nav
controlNavThumbsFromRel:false, //Use image rel for thumbs
controlNavThumbsSearch: '.jpg', //Replace this with...
controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
keyboardNav:true, //Use left and right arrows
pauseOnHover:true, //Stop animation while hovering
manualAdvance:false, //Force manual transitions
captionOpacity:0.8, //Universal caption opacity
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){} //Triggers after all slides have been shown
});
});
</script>
What i want to add is now text for each image dynamically. The problem is that everything is yet controlled from wordpress dashboard. So i cant just change and apply any other plugin as a lot effort has already been put into the plugin to apply all the css/js/php changes/implementations. The text would look like any normal jquery slider has: a black or white translucent overlay with text for each image. Any help? Hey everyone im using nivo slider and I want to have 5 images instead of the general 4 it uses. However I have added my 5th image as the last on to be display. Once it has shown this image it doesn't loop back to the first image again. It loops to the 2nd one. Has anyone got any idea what I need to change so that it loops to the first slide again? Ive tried adding HTML captions to see if this is what it uses to see how many slides there is, ive tried editing the total slides from 0 to 4 & 5. But still no luck Heres the link to the slider : http://cp2.chunkychips.net/~arcsyste/index.php Thanks everyone Megan I'm using the Nivo slider (http://nivo.dev7studios.com/) for a banner with different thumbnails for the controls. After several hours of wrestling with the CSS, I was able to make it so each thumbnail could have its own style and hover. Now the JS doesn't work - meaning, the banner doesn't slide when I click any of the thumbnails. Can anyone help me out with this? I'm very much a beginner with JS. Here's my HTML: Code: <div id="slider" class="nivoSlider">
<img src="images/banner-1.jpg" alt="" />
<img src="images/banner-2.jpg" alt="" />
<img src="images/banner-3.jpg" alt="" />
<img src="images/banner-2.jpg" alt="" />
<span class="nivo-controlNav">
<a class="nivo-control smerch"> </a>
<a class="nivo-control gervais"> </a>
<a class="nivo-control karl"> </a>
<a class="nivo-control insects"> </a>
</span>
</div>
Here's my CSS: Code: /*============================*/
/*=== Custom Slider Styles ===*/
/*============================*/
#slider {
position:relative;
width:984px;
height:501px;
background:url(images/loading.gif) no-repeat 50% 50%;}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;}
#slider a {
border:0;
display:block;}
.nivo-controlNav {
position:absolute;
left:260px;
bottom:-42px;}
.nivo-controlNav a {
display:block;
width:99px;
height:67px;
border:0;
margin-right:3px;
float:left;}
.nivo-controlNav a.active {
background-position:0 -22px;}
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(images/arrows.png) no-repeat;
text-indent:-9999px;
border:0;}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;}
a.nivo-prevNav {
left:15px;}
.nivo-caption {
text-shadow:none;
font-family: Helvetica, Arial, sans-serif;}
.nivo-caption a {
color:#efe9d1;
text-decoration:underline;}
/*====================*/
/*=== Other Styles ===*/
/*====================*/
.clear {clear:both;}
#slider .nivo-controlNav {
position:absolute;
bottom:0; /* Put the nav below the slider */
left: 0;
width: 984px;}
#slider .nivo-controlNav img {
display:inline; /* Unhide the thumbnails */
height: 67px;
width: 99px;
position: relative;}
.nivo-control {
cursor:pointer;}
.nivo-controlNav a {position: absolute; bottom: -122px;}
.smerch {right: 38px; background: url(images/mn-thumb-1.png) top left no-repeat;}
.smerch:hover{background: url(images/mn-thumb-1-over.png) top left no-repeat;}
.gervais {right: 134px; background: url(images/mn-thumb-2.png) top left no-repeat;}
.gervais:hover{background: url(images/mn-thumb-2-over.png) top left no-repeat;}
.karl {right: 238px; background: url(images/mn-thumb-3.png) top left no-repeat;}
.karl:hover{background: url(images/mn-thumb-3-over.png) top left no-repeat;}
.insects {right: 342px; background: url(images/mn-thumb-4.png) top left no-repeat;}
.insects:hover{background: url(images/mn-thumb-4-over.png) top left no-repeat;}
Not sure if this is needed, but here's the section of the JS for the controls: Code: //Add Control nav
if(settings.controlNav){
var nivoControl = $('<div class="nivo-controlNav"></div>');
slider.append(nivoControl);
for(var i = 0; i < kids.length; i++){
if(settings.controlNavThumbs){
var child = kids.eq(i);
if(!child.is('img')){
child = child.find('img:first');
}
if (settings.controlNavThumbsFromRel) {
nivoControl.append('<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr('rel') + '" alt="" /></a>');
} else {
nivoControl.append('<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr('src').replace(settings.controlNavThumbsSearch, settings.controlNavThumbsReplace) +'" alt="" /></a>');
}
} else {
nivoControl.append('<a class="nivo-control" rel="'+ i +'">'+ (i + 1) +'</a>');
}
}
I'm at a loss. Any help would be great. Thanks. Here's a quick visual of the parts of the slider: http://i.imgur.com/tkE2Y.png Hello there, I am new to UI Development, I had an issue in displaying slider, i have to use 3 sliders in my page, 2 are working fine but the 3rd slide is not getting displayed even though the code is same as the remaining 2. Below are my JS and HTML pages. Please reply me ASAP. Thank you. Java Script Code: // Time Slider $("#time_slider").slider({ range: true, min: 0, max: 1439, values: [540, 1020], slide: slideTime }); function slideTime(event, ui){ var minutes0 = parseInt($("#time_slider").slider("values", 0) % 60); var hours0 = parseInt($("#time_slider").slider("values", 0) / 60 % 24); var minutes1 = parseInt($("#time_slider").slider("values", 1) % 60); var hours1 = parseInt($("#time_slider").slider("values", 1) / 60 % 24); $("#time").text(getTime(hours0, minutes0) + ' - ' + getTime(hours1, minutes1)); } function getTime(hours, minutes) { var time = null; minutes = minutes + ""; if (hours < 12) { time = "AM"; } else { time = "PM"; } if (hours == 0) { hours = 12; } if (hours > 12) { hours = hours - 12; } if (minutes.length == 1) { minutes = "0" + minutes; } return hours + ":" + minutes + " " + time; } slideTime(); //----------------------------- // Trip Duration $("#duration_slider").slider({ value: 160, min: 0, max: 1440, step: 30, slide: slideDuration }); function slideDuration(event, ui){ var hours = Math.floor(ui.value / 60); var minutes = ui.value - (hours * 60); if(hours.length == 1) hours = '0' + hours; if(minutes.length == 1) minutes = '0' + minutes; $("#duration").text(hours+'hrs. '+minutes+'mins. '); } slideDuration(); //----------------------------- // Max Price $("#price_slider").slider({ value: 160, min: 0, max: 1440, step: 30, slide: slidePrice }); function slidePrice(event, ui){ var dollars = ui.value; $("#maxprice").text('$'+dollars); } slidePrice(); HTML Code: <head> <style> #slider-range{width:400px;} #slider-range,#time,#duration,#maxprice {margin:10px;display:block;} .ui-slider-horizontal .ui-state-default {background:url(images/scrub-btn.png) no-repeat scroll 50% 50%;} .flights-select {margin: -22px 0px 140px;} </style> </head> <body> <div class="flights-section-title">Flight Time</div> <div class="flights-section"> <ul class="inline"> <li><input class="radio" type="radio" name="2" checked="checked" value="a"><div class="flight-radio-label">Take-Off</div></li> <li><input class="radio" type="radio" name="2" value="b"><div class="flight-radio-label">Landing</div></li> </ul> <div class="leftnav-dot-divider"> <div id="time_slider"></div> <span id="time"></span></div> </div><!-- flight-section-slider --> <div class="flights-section-title">Max Trip Duration</div> <div class="flights-section"> <div class="leftnav-dot-divider"> <div id="duration_slider"></div> <span id="duration">2hrs. 0mins.</span> </div> </div><br /> <div class="flights-section-title">Max Price</div> <div class="flights-section"> <div class="leftnav-dot-divider"> <div id="price_slider"></div><span id="maxprice">$100</span> </div> </div><br /> </body I really like the the script posted at http://www.javascriptkit.com/script/...mbslider.shtml and I would like to use it, but I am having an issue making it work with version 6 of IE. In all newer versions of IE, Firefox, Chrome, Opera and Safari, it renders great, but with IE 6 all the images in the 'thumb' array display inline below the main canvas window. I know that IE6 is much out of date, but unfortunately that is the version that comes pre-loaded on XP SP3 and some of the workstations I support still use this version. Is there a way to pre-load the images, but only have the first image display in the canvas window? I have tried adjusting the CSS properties and tweaking the javascript, but have had no success after two days. I am relatively new at CSS and Javascript, so I have obviously exceeded my capability. Any suggestion would be appreciated! Thank you. Hello! I've been fighting with a jQuery slider all day, and it's going nowhere because admittedly I have extremely limited jQuery knowledge. I am really hoping that someone here is better at this than I am and can tell me why I see a list of the items that should be in the slider stacked up on top of each other rather than seeing the actual slider. Here is the functions.php code. All CSS is in place, but I can copy/paste the stylesheet if necessary as well. If this isn't an appropriate forum for this, can you point me in the right direction? I don't even know which way is up anymore!!! Code:
<?php
/* HEADER SCRIPTS */
function headscript() {
global $post;
if (function_exists('is_products_page')){
if ( get_post_type() == 'wpsc-product' || is_products_page() )
return;
}
?>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-3270175-9']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Default Action
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return false;
});
});
</script>
<script type="text/javascript" src="http://www.claritymind.com/js/easySlider1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider2").easySlider({
auto: true,
continuous: true,
pause: 6000,
speed: 800,
nextId: "slider1next",
prevId: "slider1prev"
});
});
</script>
<script type="text/javascript">
$(function () {
$('a#testbutton').hover(function() {
$(this).fadeTo("fast", 1);
}, function() {
$(this).fadeTo("fast", .85);
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider1").easySlider({
numeric: true,
auto: true,
continuous: true,
pause: 9000,
speed: 700,
});
});
</script>
<?php }
/* PAGE SPECIFIC CSS TWEAKS */
function home_head() {
if (is_home() || is_front_page()) { ?>
<style type="text/css">
.custom .headline_area {display:none;}
</style>
<style type="text/css">
.custom .servnav {display:none;}
</style>
<?php } }
function nonhomepagecss(){
if (!is_home() && !is_front_page()) { ?>
<style type="text/css">
.custom #sidebars{margin-top:15px;background:none;}
body.custom {background-color:#f5f6f7;}
.custom #content_area {background-color: #F5F6F7;}
.custom .post_box{padding-top:30px;}
.custom #content_box{
margin: 30px auto;
width: 960px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: white;
box-shadow: 3px 3px 3px #CCC;
-moz-box-shadow: 3px 3px 3px #CCC;
-webkit-box-shadow: 3px 3px 3px #CCC;
border-top: 1px solid #E8E8E8;
border-left: 1px solid #E8E8E8;
font-family: 'Lucida Grande', 'Lucida Grande Unicode', Helvetica, Verdana, sans-serif;
padding-bottom: 30px;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
}
</style>
<?php } }
function new_servicespage() {
if (is_page('services') || is_page('30')) { ?>
<style type="text/css">
.custom .topnav {display:none;}
.custom .servnav {display:block;}
</style>
<div id="content">
<div class="post_box">
<div class="headline_area">
</div>
Example text will go here.
</div>
</div>
<div id="sidebars"><span class="newcallout1h4">
<table>
<tr>
<div style="vertical-align:top;">
<td width="275"><img src="http://cm.deviantwebdesign.com/wp-content/uploads/2012/03/VideoPlace.jpg" height="180" width="260">
</div>
<td width="330"><div style="margin-left: 30px;"> <font color="#000000" font size="4">HEADLINE TEXT</font>
<ul>
<font color="#000000" font size="3">
<li>Bullet 1 - Example text goes here.</li>
<li>Bullet 2. Ut enim ad minim veniam, quis nostrud exercitation.</li>
<li>Bullet 3. Duis aute irure dolor in reprehenderit in voluptate velit esse.</li>
</font>
</ul>
</div></td>
<td width="275"><div style="margin-left: 30px;">
<script type="text/javascript" src="//moon-ray.com/v2.4/include/formEditor/genjs.php?html=true&uid=p2c6497f5&version=1"></script>
</div></td>
</tr>
</table>
</span>
<?php thesis_build_sidebars(); ?>
</div>
<?php } }
add_action('thesis_hook_custom_template', 'new_servicespage');
/* NAVIGATION MENU */
function navmenuarea(){ ?>
<div class="topnav">
<div style="width:960px;margin-left:auto;margin-right:auto;">
<div style="float:left;">
<a href="http://claritymind.com/"><img alt="clrity-logo" src="http://www.claritymind.com/wp-content/uploads/2011/03/logosmall2.jpg" style="position:relative;left:0px;" /></a>
</div>
<div style="float:right;padding-top:11px;">
<ul id="navlist">
<li><a href="http://claritymind.com/services">Services</a></li>
<li><a href="http://claritymind.com/next-step">Next Steps</a></li>
<li><a href="http://claritymind.com/about">About</a></li>
<li><a href="http://claritymind.com/free-articles">Free Stuff</a></li>
<li><a href="http://claritymind.com/clients">Clients</a></li>
<li><a href="http://claritymind.com/events">Events</a></li>
<li><a style="color:#BCFC3D;" href="http://claritymind.com/products">Store</a></li>
</ul>
</div>
</div>
</div>
<?php }
/* FEATURED AREA */
function lowermenu(){
if (is_page()) { ?>
<div class="clear"></div>
<div style="width:100%;height:5px;"></div>
<div class="pagecentered">
<div class="newcallout1">
</div>
</div>
<div style="width:100%;height:15px;"></div>
<?php } }
/* REGISTER SIDEBARS FOR CUSTOM SIDEBARS */
if (function_exists('register_sidebar')) {
$sidebars = array(1,2, 3, 4, 5, 6, 7, 8, 9, 10);
foreach($sidebars as $number) {
register_sidebar(array(
'name' => 'Side ' . $number,
'id' => 'side-' . $number,
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h3>',
'after_title' => '</h3>'
));
}
}
function sidebartabs(){
if (function_exists('is_products_page')){
if ( get_post_type() == 'wpsc-product' || is_products_page() )
return;
}
?>
<div style="width:100%;height:25px;"></div>
<div class="tabcontainer">
<ul class="tabs">
<li><a href="#tab1">Popular</a></li>
<li><a href="#tab2">Latest</a></li>
<li><a href="#tab3">Topics</a></li>
<li><a href="#tab4">Links</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content" style="padding-right:0px;">
<a href="http://www.claritymind.com/next-step/" style="border:0;padding:0;margin:0;"><img
src="http://www.claritymind.com/wp-content/uploads/2012/01/Master-Your-Mindset.png" alt="Change
Your Mindset with Clarity Mind Coaching" style="border:0;padding:0;margin:0;" /></a>
<div class="clear"></div>
</div>
<div id="tab2" class="tab_content">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Side 6') ) :
?>
<?php endif; ?>
</div>
<div id="tab3" class="tab_content">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Side 7') ) :
?>
<?php endif; ?>
<div class="clear"></div>
</div>
<div id="tab4" class="tab_content">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Side 8') ) :
?>
<?php endif; ?>
</div>
</div>
</div>
<div class="clear"></div>
<?php }
add_action('thesis_hook_before_sidebars', 'sidebartabs');
function home_pagecustom() {
if (is_home() || is_page(4217)) { ?>
<div style="height:0px;width:0px;position:relative;left:294px;z-index:999;">
<div style="width:356px;height:1px;background:#efefef;"></div>
<div style="width:356px;padding-top:2px;"><span class="nqheading">Featured from the
Blog</span></div>
</div>
<div id="slider1">
<ul>
<?php query_posts($query_string . '&cat=-3,-8&posts_per_page=5'); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<li>
<div class="post">
<div style="width:279px;margin-right:15px;float:left;">
<?php $post_image = thesis_post_image_info('image');
echo $post_image['output']; ?>
</div>
<div style="width:356px;float:right;padding-top:20px;">
<div style=height:300px;overflow:hidden;">
<!-- Display the Title as a link to the Post's permalink. -->
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php
the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<div class="entry">
<?php the_excerpt(); ?>
</div>
</div>
<div style="width:356px;height:2px;"></div>
<span class="readstory"><a href="<?php the_permalink() ?>" rel="bookmark" title="Continue
Reading <?php the_title_attribute(); ?>">Continue Reading Post →</a>
</div>
<div class="clear"></div>
</div> <!-- closes the first div box -->
</li>
<?php endwhile; else: ?>
<p>Sorry, no posts matched your criteria.</p>
<?php endif; ?>
</ul>
</div><!-- close slider1 -->
<?php wp_reset_query(); ?>
<div style="width:650px;margin-top:10px;">
<div class="one_third">
<div style="width:100%;height:1px;background:#efefef;"></div>
<div style="width:100%;padding-top:2px;"><span class="nqheading">Lifestyle Design</span></div>
<div style="width:199px;height:10px;"></div>
<?php query_posts($query_string . '&cat=37&posts_per_page=3'); ?>
<?php if (have_posts()) : ?>
<?php $count = 0; ?>
<?php while (have_posts()) : the_post(); ?>
<?php $count++; ?>
<?php if ($count <= 1) : ?>
<?php $post_image = thesis_post_image_info('thumb');echo $post_image['output']; ?>
<h2 class="teasertitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<span class="teaserexcerpt"><?php the_excerpt(); ?></span>
<?php else : ?>
<div style="width:199px;height:1px;border-top:1px dotted #cecece;margin-top:5px;"></div>
<h2 class="teasertitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<?php endif; ?>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
</div>
<div class="one_third">
<div style="width:100%;height:1px;background:#efefef;"></div>
<div style="width:100%;padding-top:2px;"><span class="nqheading">Love & Relationships</span></div>
<div style="width:199px;height:10px;"></div>
<?php query_posts($query_string . '&cat=39&posts_per_page=3'); ?>
<?php if (have_posts()) : ?>
<?php $count = 0; ?>
<?php while (have_posts()) : the_post(); ?>
<?php $count++; ?>
<?php if ($count <= 1) : ?>
<?php $post_image = thesis_post_image_info('thumb');echo $post_image['output']; ?>
<h2 class="teasertitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<span class="teaserexcerpt"><?php the_excerpt(); ?></span>
<?php else : ?>
<div style="width:199px;height:1px;border-top:1px dotted #cecece;margin-top:5px;"></div>
<h2 class="teasertitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<?php endif; ?>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
</div>
<div class="one_third last">
<div style="width:100%;height:1px;background:#efefef;"></div>
<div style="width:100%;padding-top:2px;"><span class="nqheading">Personal Growth</span></div>
<div style="width:199px;height:10px;"></div>
<?php query_posts($query_string . '&cat=226&posts_per_page=3'); ?>
<?php if (have_posts()) : ?>
<?php $count = 0; ?>
<?php while (have_posts()) : the_post(); ?>
<?php $count++; ?>
<?php if ($count <= 1) : ?>
<?php $post_image = thesis_post_image_info('thumb');echo $post_image['output']; ?>
<h2 class="teasertitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<span class="teaserexcerpt"><?php the_excerpt(); ?></span>
<?php else : ?>
<div style="width:199px;height:1px;border-top:1px dotted #cecece;margin-top:5px;"></div>
<h2 class="teasertitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<?php endif; ?>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
</div>
<div class="clear"></div>
</div>
<div class="newcallout">
<h4 class="newcallouth4"><a href="http://www.claritymind.com/soul-affirmation-music-for-better-outcomes/">Browse Affirmation Music for Sale!</a></h4>
</div>
<div style="width:650px;margin-top:30px;">
<div class="one_third">
<div style="width:100%;height:1px;background:#efefef;"></div>
<div style="width:100%;padding-top:2px;"><span class="nqheading">Awareness</span></div>
<div style="width:199px;height:10px;"></div>
<?php query_posts($query_string . '&cat=15&posts_per_page=3'); ?>
<?php if (have_posts()) : ?>
<?php $count = 0; ?>
<?php while (have_posts()) : the_post(); ?>
<?php $count++; ?>
<?php if ($count <= 1) : ?>
<?php $post_image = thesis_post_image_info('thumb');echo $post_image['output']; ?>
<h2 class="teasertitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<span class="teaserexcerpt"><?php the_excerpt(); ?></span>
<?php else : ?>
<div style="width:199px;height:1px;border-top:1px dotted #cecece;margin-top:5px;"></div>
<h2 class="teasertitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<?php endif; ?>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
</div>
<div class="one_third">
<div style="width:100%;height:1px;background:#efefef;"></div>
<div style="width:100%;padding-top:2px;"><span class="nqheading">Meditation</span></div>
<div style="width:199px;height:10px;"></div>
<?php query_posts($query_string . '&cat=40&posts_per_page=3'); ?>
<?php if (have_posts()) : ?>
<?php $count = 0; ?>
<?php while (have_posts()) : the_post(); ?>
<?php $count++; ?>
<?php if ($count <= 1) : ?>
<?php $post_image = thesis_post_image_info('thumb');echo $post_image['output']; ?>
<h2 class="teasertitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<span class="teaserexcerpt"><?php the_excerpt(); ?></span>
<?php else : ?>
<div style="width:199px;height:1px;border-top:1px dotted #cecece;margin-top:5px;"></div>
<h2 class="teasertitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<?php endif; ?>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
</div>
<div class="one_third last">
<div style="width:100%;height:1px;background:#efefef;"></div>
<div style="width:100%;padding-top:2px;"><span class="nqheading">Spirituality</span></div>
<div style="width:199px;height:10px;"></div>
<?php query_posts($query_string . '&cat=61&posts_per_page=3'); ?>
<?php if (have_posts()) : ?>
<?php $count = 0; ?>
<?php while (have_posts()) : the_post(); ?>
<?php $count++; ?>
<?php if ($count <= 1) : ?>
<?php $post_image = thesis_post_image_info('thumb');echo $post_image['output']; ?>
<h2 class="teasertitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<span class="teaserexcerpt"><?php the_excerpt(); ?></span>
<?php else : ?>
<div style="width:199px;height:1px;border-top:1px dotted #cecece;margin-top:5px;"></div>
<h2 class="teasertitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<?php endif; ?>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
</div>
<div class="clear"></div>
<br /><br /><br /><br />
</div>
<?php } }
add_action('thesis_hook_before_content', 'home_pagecustom');
/* CUSTOM FOOTER */
function newfooter(){ ?>
<div style="width:100%;height:80px;"></div>
<div style="width:100%;background:#000000;" class="footernew1">
<div style="width:100%;height:0px;position:relative;top:-132px;z-index:-1;">
<div style="background:url(http://www.claritymind.com/wp-content/uploads/2011/03/mountainback2.jpg) bottom repeat-x;height:132px;width:100%;"></div>
</div>
<div class="pagecentered" style="padding-top:15px;">
<div class="one_third">
<img src="http://www.claritymind.com/wp-content/uploads/2011/03/certification1.jpg" alt="certification" />
<div style="width:100%;height:3px;border-bottom:1px dotted #444;"></div>
<br />
<img src="http://www.claritymind.com/wp-content/uploads/2011/03/logosmall2.jpg" alt="Clarity Mind Logo" /><br />
20 Ravenscroft Drive Asheville, NC 28801<br />
404-NOW-MIND (404-669-6463)<br />
Skype: KenLad1
</div>
<div class="one_third">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Side 9') ) : ?>
<?php endif; ?>
</div>
<div class="one_third last">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Side 10') ) : ?>
<?php endif; ?>
</div>
<div class="clear"></div>
<div style="height:20px;width:100%;"></div>
<span style="font-size:10px;color:#fff;">Copyright © Clarity Mind, LLC. All Rights Reserved. Reproduction without permission prohibited.</span>
</div>
</div>
<?php }
function format_gridview_desc($description){
if (strlen($description) > 175)
$description = substr ( $description , 0 , 175 )."...";
echo $description;
}
/* create new side bar for music player - this will only be displayed on the product page */
register_sidebar(array(
'name'=> 'Music Player',
'id' => 'music_player',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
Hello! I've been working with the Zurbs Foundation grid recently and they included a very nifty slider that works wonderfully, it has a lot of really neat support to it However when I implemented it the javascript is going back and resizing the height of the "content" div container that came stock with the slider. All of the code I'm using is 100% stock from Foundation, I'm working on a blank template at the moment in the javascript it edits the width & height to a height and width of 1px, so that if there is no content it will collapse. this is what that looks like below: Code: c=f.wrap('<div class="orbit-wrapper" />').parent();f.add(h).width("1px").height("1px")
So I edited the width to include Code: .width("auto")
I did this for the height as well, but it wasn't altering it so i gave it Code: .height("450px !important")
(i usually don't use 'important', but i felt like I might be able to blow it out of the water and force it to be 450px tall). When I go to inspect the element it tells me that the height is 450px with an important tag attached to it, however there is still something overriding it Code: element.style{
height:468px;
}
the element.style means that a javascript file is the one that is overriding the current style. I'm struggling to find exactly where this is being called from. Any help would be greatly appreciated. Thanks! EDIT: Resolved! by adding Code: #featured a{height:450px;}
to the css, it will fix the height (not fluid, but you can also do height:auto; and it will also work fine I am using a JQuery Slider function in one of my forms that has the folowing code: Code: <script>
$(function() {
$( "#slider" ).slider({
value:100,
min: 0,
max: 100,
step: 1,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value + "% Clear" );
}
});
$( "#amount" ).val( $( "#slider" ).slider( "value" ) + "% Clear" );
});
</script>
And the form looks like: Code: <form method=POST etc...>
<div id="slider"></div>
<span><input type="text" id="amount" name="Percentage" style="border:0; color:#f6931f; font-weight:bold;" /></span>
</form>
Now, in the php, I have an error system set up, so that if one of the items in the form are left blank etc., an error will generate without posting the form. However, I am using <?php echo ?> in the form to repopulate the fields that were entered, so user does not have to fill them again. However, the slider always resets back to 100%... How can I fix this so that if the form does not POST, the slider will keep the value that the user set it at. Is this possible, I am having trouble figuring it out. Thanks! Hi All, Hoping somebody can help me with my implementation of the Nivo Slideshow on my website... I've been at it for a couple of days now and I'm just about ready to give up ( Here's my markup: Code: <div id="slider">
<img src="/images/Slide1.png" alt="" title="Dead Kool"/>
<a href="http://dev7studios.com"><img src="/images/Slide2.png" alt="" title="Alex Kidd" /></a>
<img src="/images/Slide3.png" alt="" title="Asteroids" />
</div>
My CSS: Code: #slider {
position:relative;
width:620px;
height:350px;
background-image:url(../images/title.gif);
background-position:-10px 30px;
background-repeat:no-repeat;
background-attachment:fixed;
}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
#slider a {
border:0;
display:block;
}
.nivo-controlNav {
position:absolute;
left:260px;
bottom:-42px;
}
.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(images/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.nivo-controlNav a.active {
background-position:0 -22px;
}
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(images/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {
left:15px;
}
.nivo-caption {
font-family:"Lucida Sans Unicode", "Lucida Grande";
}
.nivo-caption a {
color:#f71cac;
text-decoration:underline;
}
Slider CSS: Code: /*
* jQuery Nivo Slider v2.3
* http://nivo.dev7studios.com
*
* Copyright 2010, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* March 2010
*/
/* The Nivo Slider styles */
.nivoSlider {
position:relative;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:60;
display:none;
}
/* The slices in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:50;
height:100%;
}
/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
opacity:0.8; /* Overridden by captionOpacity setting */
width:100%;
z-index:89;
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline;
}
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:99;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
position:relative;
z-index:99;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
The test site is here http://www.koolkiddclothing.com/Test I feel like I'm being dumb, but for some reason I just can't get it to work, so any help is good help... I use offshore coding service, which failed with superior PSD to WP conversion with basic JS Slider. I know the task is complex, but do not want to hire superficial coders any more. What software can completely replace freelancers to create excellent JS Slider on WordPress engine?
Hi there, There appears to be some sort of distortion issue with the slider on my client's website. The website is www.tranzaura.com and for some reason some of the slides on the home page appear distorted when viewed in some browsers. See attached image. Can you please check the website on your computer and please let me know if there is distortion. I'd appreciate if you could vote in the poll. Note that there are 9 slides. You can scroll through them if you wish. I have no idea why this is happening. Any thoughts or advice would be appreciated. Thank you I am looking for a slider. Can anybody help me? This is the design of the slider. ANy programmer can help me to insert this slider script into my website? http://sorgalla.com/projects/jcarous..._vertical.html im using interspire shopping cart. advance thanks I have a question, How do you create a slider for a website? I am not familiar with anything but html and css, but I would like to create a simple image slider for my site. How would I go about doing that? Any help is appreciated Thanks Hi All members i need helping in creating content slider look like this; http://wpclassipress.com/demo/ note; I ask for creating slider look like this (Thumbnail imge and Title under it) plz any tips to do that, My new WP site depends on this part...plz help I would like to make a Coda Slider for my blog website, Natalie's World http://natalie-nataliesworld.blogspot.com/ and I would like it right below the nav menu bar. But I am unsure of where how to go abouts making it and where to put it in the template and everything. Can somebody help me? Here is one I want to make, http://sixrevisions.com/tutorials/ja...-using-jquery/ Or something like this 1, http://thenewreview.net/ HI every one I'm looking for a numeric slider , some thing that I define the min and max numbers . the attached file is something that I want . Any suggest ? thanks I'm trying to make a div slider go left to right. In as much detail this is what I would like: -The div to be hidden on first page load -Have the div slide left to right AND BACK by the click of an image NOT a button -When the image (of a right arrow) is clicked, let the arrow slide out with the div (and IF possible when div is fully extended have image of a left arrow enabling a slide back and vice-versa) Here's what I got so far. (Don't need to use) Code: <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="TestSite/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slideleft button').click(function() {
var $lefty = $(this).next();
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ?
-$lefty.outerWidth() :
0
});
});
});
</script>
<style>
.slide {
position: relative;
overflow: hidden;
height: 120px;
width: 350px;
margin: 1em 0;
background-color: #FFF;
border: 1px solid #999;
}
.slide .inner {
position: absolute;
left: 0;
bottom: 0;
width: 338px;
height: 36px;
padding: 6px;
background-color: #F00;
color: #333;
}
.slide button {
margin: .7em 0 0 .7em;
}
.js #slidebottom .inner {
display: none;
}
</style>
</head>
<div id="slideleft" class="slide">
<button><img src="TestSite/js/fancy_nav_right.png" /></button>
<div class="inner">Slide from bottom</div>
</div>
<body>
</body>
</html>
Hi i am very new to javascript. i want the slider type effect where i can show some images. Please see here in this site www.indiabazaaronline.com i want this kind of slider effect. Plzz any body help me. Thx in advance Hey all, Was just wondering if anyone knew what type of content slider is this http://www.builtbybuffalo.com/ and were could i get one? Thanks in advance Kyle |
|||||||