|
JavaScript - Hover/mouseover Code On Jquery Product Rotator
Hi all,
Just a quick question please, i'm a javascript & jquery newbie and need a little advice to what is probably an easy problem to fix. I'm trying to get this jquery product rotator to work. It advances automatically every 5 seconds with the following code: (there's 8 buttons below and above the main content window, clicking a button swaps the divs in the content window) $(document).ready(function(){ $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs ("rotate", 5000, true); }); All i need it to do is to advance automatically as above but also advance the slider when a user hovers/mouse over a button, so the relevant content is displayed in the main window. The code to the whole slider is below, minus the CSS. A demo of the slider is he http://demo.webdeveloperplus.com/fea...ontent-slider/ Many thanks. <!-- Links to Jquery. Do not touch --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script> <div> <!-- This Week's Offer Product Viewer Code Starts Here --> <script> $(document).ready(function(){ $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs ("rotate", 5000, true); }); </script> <center> <div id="featured" > <ul class="ui-tabs-nav"> <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="/homepage/button1.jpg" width="187" height="125" alt="" /></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="/homepage/button2.jpg" width="187" height="125" alt="" /></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="/homepage/button3.jpg" width="187" height="125" alt="" /></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="/homepage/button4.jpg" width="187" height="125" alt="" /></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-5"><a href="#fragment-5"><img src="/homepage/button5.jpg" width="187" height="125" alt="" /></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-6"><a href="#fragment-6"><img src="/homepage/button6.jpg" width="187" height="125" alt="" /></a></li> <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-7"><a href="#fragment-1"><img src="/homepage/button7.jpg" width="187" height="125" alt="" /></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-8"><a href="#fragment-8"><img src="/homepage/button8.jpg" width="187" height="125" alt="" /></a></li> </ul> <!-- First Content --> <div id="fragment-1" class="ui-tabs-panel" style=""> <img src="/homepage/trade-deals.jpg" width="760" height="500" alt="" /> </div> <!-- Second Content --> <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="/about-us-main.gif" width="760" height="500" alt="" /> </div> <!-- Third Content --> <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="/homepage/button3.jpg" width="760" height="500" alt="" /> <div class="info" > <center><h2>Content </h2></center> </div> </div> <!-- Fourth Content --> <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="/homepage/button4.jpg" width="760" height="500" alt="" /> </div> <!-- Fifth Content --> <div id="fragment-5" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="/homepage/trade-deals.jpg" width="760" height="500" alt="" /> </div> <!-- Sixth Content --> <div id="fragment-6" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="/homepage/button6.jpg" alt="" width="760" height="500" /> </div> <!-- Seventh Content --> <div id="fragment-7" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="/homepage/button7.jpg" alt="" width="760" height="500" /> </div> <!-- Third Content --> <div id="fragment-8" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="/homepage/button8.jpg" alt="" width="760" height="500" /> </div> </div> Similar Tutorialshello, It is a insult to newbie to cal myself one, but I have a blog that I am trying to get a simple bit of code to work on. I have text rotator that I found and have made it work for my purposes, but I need it to pause when someone mouses over and restart when then mouse off. I have found code snipets online but I am not smart enough to figure out where they fit in....Help would be very appreciated the code it below.... Code: <div id="quotetext" >
text
</div>
<script type="text/javascript" >
var myquotes = new Array(
'quote 1',
'quote 2',
'qoute 3'
);
function rotatequote()
{
thequote = myquotes.shift(); //Pull the top one
myquotes.push(thequote); //And add it back to the end
document.getElementById('quotetext').innerHTML = thequote;
// This rotates the quote every 10 seconds.
// Replace 10000 with (the number of seconds you want) * 1000
t=setTimeout("rotatequote()",5000);
}
// Start the first rotation.
rotatequote();
</script>
Hey guys my 2nd thread on this forum requesting help ok so last month i edited this cool banner rotator and got it doing exactly what i wanted. but i need some help adding a bit more functionality to it and maybe improoving the code. would any1 be kind enough to help me out? can link codes etc just ask. Thanking you :P Hi everyone, i am looking for a tutorial or example file i can download that features the following mouseover effect: http://www.webdesignerwall.com/demo/...ed-hover2.html i have tried googling for tutorials and have tried to view source on the above page but when pasted into dreamweaver i cannot seem to get the effect to work. can anyone help??? thanks! Hi guys, any help will be greatly appreciated... The problem: Hover effect is painfully slow IE (only IE) and table mouseover causes very high processor usage When you move the mouse over table elements flash animation stutters/pauses (making flash banners impossible) You can se the page he fondovi (there's a flash animation on the right side of the page (light grey/blue color)) Hi Everyone, I hope it was the right decision to post here and not in the Javascript framework forum, as I think my problem is not necessarily related to the use of jQuery, but my lack of Javascript knowledge and how I can make both scripts work together. I am using a jQuery tab plugin that shows a different content div on click of each tab. It also has a fade in (http://www.stilbuero.de/jquery/tabs/...n73#fragment-7) In addition, I am using the scroller scripts from Blueshoes (I also tried another, similar scroller script, but run into the same problem: http://www.dyn-web.com/code/scroll/vert.php). What I want to achieve: Have a simple tab function with up to 6 tabs. Each tab content will have a scrollable div with a custom scrollbar that also scrolls on mouseover. The problem: The tab and scrollbar on initial page load work fine. Once I click on the second or third tab, the tab content loads fine, but the scroller function does not load. I have to click on the tab number again for the scrollbar to appear (I added an onClick event that loads the scrollbar, but this only seems to be activated on the second click, not the first click) I thought I could just reload the page again with an onClick event on the tabs, but this only reloads the page with the first tab active, and the tab content fade in effect doesn't quite show anymore. In addition, I do not know how to change the script so the tab that was been clicked on (e.g. tab2 or tab3) is active on page reload. Please take a look at site, where you can see everything it all in action: http://www.webjungle.com/TESTDEV/ind...s_reduced.html I'd prefer a solution that loads the scroller script immediately onClick of each tab without reloading the page. I tried all kinds of possibilities, and I have been working on this for the past 2 days! My Javascript knowledge is just to limited to grasp what needs to happen. Here is my code, as simplified as possible, with comments in italics: CSS, JAVASCRIPT and LINKS to JS libraries and plugins: Code:
<style type="text/css">
<!--Begin scroller css -->
.scrollingtext {
position:absolute;
width: 480px;
font-size:13px;
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height: 19px;
}
</style>
<!--End scroller css -->
<!--Begin Tab scripts -->
<script src="scripts/jquery-1.1.3.1.pack.js" type="text/javascript"></script>
<script src="scripts/jquery.history_remote.pack.js" type="text/javascript"></script>
<script src="scripts/jquery.tabs.pack.js" type="text/javascript"></script>
<!--tab content fade in -->
<script type="text/javascript">
$(function() {
$('#tabcontainer').tabs({ fxFade: true, fxSpeed: 'fast' });
});
</script>
<link rel="stylesheet" href="css/jquery.tabs.css" type="text/css" media="print, projection, screen">
<!--End Tab scripts -->
<!--Begin blueshoes scroller scripts -->
<script type="text/javascript" src="scripts/LibCrossBrowser.js"></script>
<script type="text/javascript" src="scripts/EventHandler.js"></script>
<script type="text/javascript" src="scripts/Bs_FormUtil.lib.js"></script>
<script type="text/javascript" src="scripts/Bs_Slider.class.js"></script>
<script type="text/javascript" src="scripts/Bs_ScrollableDiv.class.js"></script>
<script type="text/javascript" src="scripts/scrollFunction2.js"></script>
<!--End blueshoes scroller scripts -->
HTML: Code: <body onLoad="init();"> <!--init() calls the scroller script -->
<div class="scroller">
<div id="tabcontainer">
<!--TABS -->
<ul>
<li><a href="#tab1" onClick="init();"><span>1</span></a></li> <!--i was hoping to be able to initialize the scroller script with a click, but doesn't work when first clicking on it. Only after a second click the scrollbar shows up -->
<li><a href="#tab2" onClick="init();"><span>2</span></a></li>
<li><a href="#tab3" onClick="init();"><span>3</span></a></li>
</ul>
<!--TAB 1 CONTENT -->
<div id="tab1">
<table width="510" height="400" border="1" cellpadding="0" cellspacing="0" id="scroll1" onLoad="init();">
<tr>
<td width="499px" valign="top"><div id="divcontainer_1" style="position:relative; width:499px; height:380; overflow:hidden;">
<div id="divContent_1" class="scrollingtext"> While global demand for energy is rising at an unprecendented pace, renewable energy technologies are maturing to the point to supply commercially-viable energy and electricity to meet these needs. Two issues are inherent to this increase in both supply and demand: developing reliable transmission to guarantee that clean and renewable energy is efficiently delivered to those who need it in all locations, and ensuring that policy development is collaborative in nature and meets the needs of all parties involved, including technology newcomers.
While global demand for energy is rising at an unprecendented pace, renewable energy technologies are maturing to the point to supply commercially-viable energy and electricity to meet these needs. Two issues are inherent to this increase in both supply and demand: developing reliable transmission to guarantee that clean and renewable energy is efficiently delivered to those who need it in all locations, and ensuring that policy development is collaborative in nature and meets the needs of all parties involved, including technology newcomers.
While global demand for energy is rising at an unprecendented pace, renewable energy technologies are maturing to the point to supply commercially-viable energy and electricity to meet these needs. Two issues are inherent to this increase in both supply and demand: developing reliable transmission to guarantee that clean and renewable energy is efficiently delivered to those who need it in all locations, and ensuring that policy development is collaborative in nature and meets the needs of all parties involved, including technology newcomers. </div>
</div></td>
<td width="11" height="100%" align="left" valign="top" bgcolor=""><div id="sliderDiv1"></div></td>
</tr>
</table>
</div>
<!--TAB 2 CONTENT -->
<div id="tab2">
<table width="510" height="400" border="1" cellpadding="0" cellspacing="0" id="scroll1">
<tr>
<td width="499px" valign="top"><div id="divcontainer_2" style="position:relative; width:499px; height:380; overflow:hidden;">
<div id="divContent_2" class="scrollingtext"> While global demand for energy is rising at an unprecendented pace, renewable energy technologies are maturing to the point to supply commercially-viable energy and electricity to meet these needs. Two issues are inherent to this increase in both supply and demand: developing reliable transmission to guarantee that clean and renewable energy is efficiently delivered to those who need it in all locations, and ensuring that policy development is collaborative in nature and meets the needs of all parties involved, including technology newcomers.
While global demand for energy is rising at an unprecendented pace, renewable energy technologies are maturing to the point to supply commercially-viable energy and electricity to meet these needs. Two issues are inherent to this increase in both supply and demand: developing reliable transmission to guarantee that clean and renewable energy is efficiently delivered to those who need it in all locations, and ensuring that policy development is collaborative in nature and meets the needs of all parties involved, including technology newcomers.
While global demand for energy is rising at an unprecendented pace, renewable energy technologies are maturing to the point to supply commercially-viable energy and electricity to meet these needs. Two issues are inherent to this increase in both supply and demand: developing reliable transmission to guarantee that clean and renewable energy is efficiently delivered to those who need it in all locations, and ensuring that policy development is collaborative in nature and meets the needs of all parties involved, including technology newcomers. </div>
</div></td>
<td width="11" height="100%" align="left" valign="top" bgcolor=""><div id="sliderDiv2"></div></td>
</tr>
</table>
</div>
<!--TAB 3 CONTENT -->
<div id="tab3">
<table width="510" height="400" border="1" cellpadding="0" cellspacing="0" id="scroll1">
<tr>
<td width="499px" valign="top"><div id="divcontainer_3" class="slidertext" style="position:relative; width:499px; height:380; overflow:hidden;">
<div id="divContent_3" class="scrollingtext"> While global demand for energy is rising at an unprecendented pace, renewable energy technologies are maturing to the point to supply commercially-viable energy and electricity to meet these needs. Two issues are inherent to this increase in both supply and demand: developing reliable transmission to guarantee that clean and renewable energy is efficiently delivered to those who need it in all locations, and ensuring that policy development is collaborative in nature and meets the needs of all parties involved, including technology newcomers.
While global demand for energy is rising at an unprecendented pace, renewable energy technologies are maturing to the point to supply commercially-viable energy and electricity to meet these needs. Two issues are inherent to this increase in both supply and demand: developing reliable transmission to guarantee that clean and renewable energy is efficiently delivered to those who need it in all locations, and ensuring that policy development is collaborative in nature and meets the needs of all parties involved, including technology newcomers.
While global demand for energy is rising at an unprecendented pace, renewable energy technologies are maturing to the point to supply commercially-viable energy and electricity to meet these needs. Two issues are inherent to this increase in both supply and demand: developing reliable transmission to guarantee that clean and renewable energy is efficiently delivered to those who need it in all locations, and ensuring that policy development is collaborative in nature and meets the needs of all parties involved, including technology newcomers. </div>
</div></td>
<td width="11" height="100%" align="left" valign="top" bgcolor=""><div id="sliderDiv3"></div></td>
</tr>
</table>
</div>
</div> <!-- END tabcontainer *****************-->
</div> <!-- END scroller *****************-->
</body>
P.S. I am using a transitional doctype, which seems to be correct and working with each script on its own... Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> I would appreciate some hints or tips sooo much!!!! Thank you for reading my essay. So, i have this code which retrieves php files for me using jquery and id love to get it working with Jquery history plugin. I tried modifying the code i got from the ajax demo to work for me, but i just couldnt do it as i do not know any javascript really.. ( actually what i tried was simply to change "#ajax-links a" to "#menu li a" and .html to .php ..but nothing.. :rolleyes: Id be very gratefull if someone would help me out with this one. All related code can be found bellow (the ones that should be needed anyways): This is the code that retrieves php files inside "#content" when item from "#menu li a" with the specified id is clicked Code: $(document).ready(function(){
//References
var change = $("#menu li a");
var loading = $("#loading");
var content = $("#content");
//Manage click events
change.click(function(){
//show the loading bar
showLoading();
//load selected section
if(this.id == "home")
{
change.load(this.className='current-page');
content.slideUp();
content.load("pages/index.php", hideLoading);
content.slideDown();
}
else if(this.id == "secondpage")
{
change.load(this.className='current-page');
content.slideUp();
content.load("pages/secondpage.php", hideLoading);
content.slideDown();
}
else
{
//hide loading bar if there is no selected section
hideLoading();
}
});
//show loading bar
function showLoading(){
loading
.css({visibility:"visible"})
.css({opacity:"1"})
.css({display:"block"})
;
}
//hide loading bar
function hideLoading(){
loading.fadeTo(1000, 0);
};
});
Heres the structure of the menu/content Code: <ul id="menu"> <li><a id="home" class="normal" href="#Home"></a></li> <li><a id="secondpage" class="normal" href="#Secondpage"></a></li> </ul> <div id="content"> <ul id="sec-menu"> <li><a id="link1" class="normal" href="#">Link1</a></li> <li><a id="link2" class="normal" href="#">Link2</a></li> </ul> </div> Heres the code that jquery history plugin uses in demo for ajax Code: jQuery(document).ready(function($) {
function load(num) {
$('#content').load(num +".html");
}
$.history.init(function(url) {
load(url == "" ? "1" : url);
});
$('#ajax-links a').live('click', function(e) {
var url = $(this).attr('href');
url = url.replace(/^.*#/, '');
$.history.load(url);
return false;
});
});
Hi everyone, So basically what I am trying to do here is make a navigation system for a website. I want to have a series of buttons that drop down a large panel with info and furhter links when you mouseover them, kind of like the Unilever site: http://unilever.com/ (mouseover the arrows to the side of "About us", Our Brands", etc). So I followed WebDesignerWall's Simple slide panel tutorial (http://www.webdesignerwall.com/tutor...for-designers/, which is basically exactly what I am after - except that I want to have the slide out/slide back happen on a mouseover/mouseout. The code I used looks like so: Code: $(document).ready(function(){
$(".btn-slide").mouseover(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
$("#panel").mouseout(function(){
$("#panel").slideToggle("slow");
$(".btn-slide").toggleClass("active"); return false;
});
});
It kind of works but is pretty easily broken in a way that you couldn't just put up with. The slider sometimes repeatedly slides in and out, apparently all by itself, and the panel is sometimes stuck open when the mouse is nowhere near it - and therefore technically should be be hidden. I also tried the same thing using hover rather than mouseover, but unfortunately that breaks it even worse, since I want the panel to stay open when the user's mouse is within the panel area, not just within the button. So I'm wondering if anyone can offer me any suggestions as to how to get this to work, or even just an alternative way to achieve a simliar effect? I do like the sliding animation but I'm willing to forgo that for reliable functionality. Thanks in advance for any help! i keep getting the error GET http://code.jquery.com/jquery.min.map net::ERR_TOO_MANY_REDIRECTS & Failed to load resource: net::ERR_TOO_MANY_REDIRECTS when i load my page...and the havascript doesn't work properly on ym page...how do i resolve this. thanx in advance So I have a navigation thats decently simple, but the JS doesnt seem to operate in the correct manner. When i hover over a child navigation list item, the parent will start its animation as well. I know when you hover over the child you are in turn hovering over the parent, but is there a way to get the parent to not animate? http://jsfiddle.net/bWRWt/ This is an example we can all work on, which is exactly my situation. Hi this is my first thread here and I am a beginner programmer Java/HTML/CSS only. I used google to add an interactive feature to my website that some people may be familiar with. I wanted to make an image that changes into another image when you mouse over it. Maybe there is a problem with how I integrated it into the rest of my webpage code. I am using angelfire to build my website and am a little disappointed that they don't have their own forum but this one looks really good. Following is my code that can be examined and possibly corrected. Code: <html>
<head>
<style type="text/css">
body {background-color:gold;}
table
{
width:70%;
}
th
{
height:100px;
}
</style>
<script language="JavaScript">
<!-- Hide the script from old browsers --
img0_on = new Image(400,400);
img0_on.src="images/the-power-of-the-cross.JPG";
img0_off = new Image(400,400);
img0_off.src="images/006.JPG";
function over_image(parm_name)
{
document[parm_name].src = eval(parm_name + "_on.src");
}
function off_image(parm_name)
{
document[parm_name].src = eval(parm_name + "_off.src");
}
// --End Hiding Here -->
</script>
<TITLE>Welcome to the Christ Alive Community Church Website</TITLE>
</head>
<body>
<a href="http://www.angelfire.com/caccweb/index2.html" onmouseover="over_image('img0');" onmouseout="off_image('img0')"> <img src="images/006.JPG" border="0" name="img0"> </a>
<TABLE>
<TR>
<TD>
<img src="images/006.JPG" WIDTH="400" HEIGHT="400">
</TD>
<TD>
<img src="images/043.JPG" WIDTH="400" HEIGHT="400">
</TD>
</TR>
</TABLE>
</body>
</html>
Hello. I'm trying to improve page loads times on my site and I've tracked the issue down to the share buttons we have. We load the Tweet Button, Facebook Like Button, and Google +1 button sometimes up to 25 times on one page. What I'd like to do is, on initial load, display an image that looks like the Tweet Button, for example, and then when hovering over a div, change to the actual Tweet Button code. I know how to do this in general, but the key is that the actual tweet button code doesn't load when the page loads, only when you hover over the div does the actual code load. Can someone please give me a general template and I can integrate it in with my site? Thanks. hi, i want to write a js function which will change images (i have an array of images) on mouse over till the time i have my mouse over the image. i have written function: Code: function changeImage(testImage,source)
{
var my_array=testImage.split("||");
var actualLen = my_array.length - 2;
for (i=0;i<my_array.length;i++)
{
document.getElementById("lrgPic" + source).setAttribute("src",my_array[i]);
setTimeout('',1000);
if(i == ( my_array.length - 1 ))
{ // i = (( my_array.length - 1 ) - i) - 1; // alert(i);
}
}
}
but the action i want is: on hovering over the image (location: "lrgPic" in above code) images should keep on changing grabbing the location from array ("my_array" above) and the image change should happen after every sec. i have tried "setTimeout" function; but it's not working as desired. with the code which is commented above.. i want to reset the loop so that images are continuously changed till "onmouseOut" is performed... any clues guys.. how can i improve on this code? with this code.. my script goes in infinite loop.. please help thanks in advance please help with my code below: i want to use the .live() function of jquery without having to use the click or mouse/up/down event but maybe with load or ready event when my page load. or when a feature is dropped in the droppable area. see the code below please $(".product img").draggable({ containment: 'document', opacity: 0.6, revert: 'invalid', helper: 'clone', zIndex: 100 }); $("div.content.drop-here").droppable({ drop: function(e, ui) { var param = $(ui.draggable).attr('src'); if($.browser.msie && $.browser.version=='6.0') { param = $(ui.draggable).attr('style').match(/src=\"([^\"]+)\"/); param = param[1]; } /*****the code below***** ***to use the live function when the page load or when this droppable ****function happens automatically not with a click event *****/ $(".product img").live('click', function(){alert("formclicked");}); addlist(param); } }); This code works in all browsers, Safari, Chrome, Firefox, but not IE 8 in which I'm testing right now for version. The code is below: Code:
<script type="text/javascript">
$(document).ready(function() {
$('#form_{picture_id}').ajaxForm(function() {
$(function() {
setTimeout(function() {
$("#picture_description").show('blind', {}, 800)
}, 1000);
setTimeout(function() {
$("#picture_description").hide('blind', {}, 800)
}, 11000);
});
});
});
</script>
What am I doing wrong. The code simply calls the form, then shows a DIV via BLIND then hides it using the same effect. The picture_id in {} is simply smarty PHP. Any help is much much appreciated! I am using a jQuery slider on a website but the code comes up with invalid, is there any wat to get around this without using a div tag? Thanks for any help on this: Line 26, Column 27: document type does not allow element "div" here .before('<div id="buttons">') Code: <script type="text/javascript">
$(document).ready(function() {
$('#slider')
.before('<div id="buttons">')
.cycle({
fx: 'fade',
pager: '#buttons'
});
});
</script>
Hi, Am using jQuery to hide/show rows of a table (courtesy of http://www.jankoatwarpspeed.com). Problem is I need the jQuery to respond to just the arrow (see example) not the whole row which at the moment is all clickable. Can anyone look at the jQuery and propose what needs to change to make that happen please. Example at http://www.jankoatwarpspeed.com/exam...pandable-rows/ Here's the jQuery: Code: <script type="text/javascript">
$(document).ready(function(){
$("#report tr:odd").addClass("odd");
$("#report tr:not(.odd)").hide();
$("#report tr:first-child").show();
$("#report tr.odd").click(function(){
$(this).next("tr").toggle();
$(this).find(".arrow").toggleClass("up");
});
//$("#report").jExpand();
});
</script>
Many thanks in advance, Jock 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>',
));
Hi, I've been searching for about an hour now for an div id javascript/jquery rotator dont need to have buttons just needs to roatate 3 divs every 5 secs can anyone help thanks. +rep I'm trying to slow this image rotator down. I thought I would just change the setInterval part. But it's not working. Quote: $(function() { setInterval( "nextPage()", 7000 ); }); Below is the full script. Am I missing something? Code: // Global variable that controls billboard image rotation
var $rotate = 1;
// Load this script when page loads
$(document).ready(function(){
// Set up a listener so that when anything with a class of 'bbtab'
// is clicked, this function is run.
$('.bbtab').click(function () {
// Turn off autorotation.
$rotate = 0;
// Remove the 'bboard_page_active' class from the visible tab contents.
$('#bboard > ul > li.bboard_page_active').removeClass('bboard_page_active');
// Add the 'bboard_page_active' class to the associated tab contents.
$(this.rel).addClass('bboard_page_active');
return false; //stop the links default action
});
});
function nextPage() {
// id is expected to look like 'bbpage1'.
// We just need the number part at the end so that we can figure out which page is next in the rotation.
var $active_page = $('#bboard > ul > li.bboard_page_active').attr('id') || 'bbpage0';
var $next_page = parseInt($active_page.substring(6)) + 1;
if ($next_page > $('#bboard > ul > li').length) { $next_page = 1; }
if ($rotate == 1) {
// Remove the 'bboard_page_active' class from the active page.
$('#'+$active_page).removeClass('bboard_page_active');
// Add the 'bboard_page_active' class to the next page.
$('#bbpage'+$next_page).addClass('bboard_page_active');
// alert("Active page is " + $active_page + " of " + $total_pages + " and next is " + $next_page);
}
}
$(function() {
setInterval( "nextPage()", 7000 );
});
Hello, Im new and need help with an image rotator script I got from "wowslider" if anyone ever heard of it. I have the following code on my website (please note that the CSS and javascript were just pre-made and I barely adjusted anything if at all; all names of the tags are not mine): Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>unnamed</title>
<script src="scripts/wowslider.js" type="text/javascript"></script>
<style type="text/css">
/* bottom center */
#wowslider-container1 .ws_bullets {
top:0;
right: 0;
}
#wowslider-container1 {
/*overflow: hidden; */
zoom: 1;
position: relative;
width:1032px;
margin:0 auto;
z-index:100;
border:none;
}
#wowslider-container1 .ws_images{
width:1032px;
height:500px;
overflow:hidden;
position:relative;
}
#wowslider-container1 .ws_images a{
color:transparent;
}
#wowslider-container1 .ws_images img{
top:0;
left:0;
border:none 0;
max-width: none;
}
#wowslider-container1 a{
text-decoration: none;
outline: none;
border: none;
}
#wowslider-container1 .ws_bullets {
font-size: 0px;
padding: 5px;
float: left;
position:absolute;
z-index:70;
top:450px;
right:900px;
}
#wowslider-container1 .ws_bullets div{
position:relative;
float:left;
}
#wowslider-container1 .ws_bullets a {
width:22px;
height:20px;
background: url(images/backgrounds/bullet.png) left top;
float: left;
text-indent: -1000px;
position:relative;
color:transparent;
}
#wowslider-container1 .ws_bullets a.ws_selbull, #wowslider-container1 .ws_bullets a:hover{
background-position: 0 100%;
}
#wowslider-container1 a.ws_next, #wowslider-container1 a.ws_prev {
position:absolute;
display:block;
top:50%;
margin-top:-16px;
z-index:60;
height: 50px;
width: 39px;
background-image: url(images/backgrounds/arrows.png);
}
#wowslider-container1 a.ws_next{
background-position: 100% 0;
right:0px;
}
#wowslider-container1 a.ws_prev {
left:0px;
background-position: 0 0;
}
#wowslider-container1 .ws-title{
position: absolute;
bottom:7%;
left: 0;
margin-right:5px;
z-index: 50;
background: #FFF;
color: #000;
padding: 10px;
font-size: 19px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
text-shadow: 1px 1px 0 #fff;
opacity: 0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}
#wowslider-container1 .ws-title div{
padding-top:5px;
font-size: 13px;
}
</style>
</head>
<!-- Slideshow Backgrounds -->
<div id="wowslider-container1">
<div class="ws_images">
<div><img src="images/backgrounds/test1.jpg" alt="test1" title="test1" id="wows0"/><span style="top:150px; right:300px; color:red; font-weight:bold;">TEXTTEXTTEXTTEXTTEXT</span></div>
<div><img src="images/backgrounds/test2.jpg" alt="test2" title="test2" id="wows1"/></div>
<div><img src="images/backgrounds/test3.jpg" alt="test3" title="test3" id="wows2"/></div>
<div><img src="images/backgrounds/test4.jpg" alt="test4" title="test4" id="wows3"/></div>
</div>
<div class="ws_bullets"><div>
<a href="#wows0" title="test1">1</a>
<a href="#wows1" title="test2">2</a>
<a href="#wows2" title="test3">3</a>
<a href="#wows3" title="test4">4</a>
</div>
</div>
<script type="text/javascript" src="scripts/wow_script.js"></script>
<!-- END ROTATOR -->
</body>
</html>
The following is the jscript used in reference (two external files): 1)wow_script.js Code: function ws_fade(b,a){var c=jQuery;a.each(function(d){if(!d){c(this).show()}else{c(this).hide()}});this.go=function(d,e){c(a.get(d)).fadeIn(b.duration);c(a.get(e)).fadeOut(b.duration);return d}};// -----------------------------------------------------------------------------------
jQuery("#wowslider-container1").wowSlider({effect:"fade",prev:"",next:"",duration:20*100,delay:90*100,outWidth:1032,outHeight:500,width:1032,height:500,autoPlay:true,stopOnHover:true,loop:false,bullets:true,caption:false,controls:true});
2) wowslider.js Code: if(!jQuery.fn.wowSlider){jQuery.fn.wowSlider=function(b){var i=this;var g=jQuery;b=g.extend({effect:function(f,d){var t=jQuery;d.each(function(H){if(!H){t(this).show()}else{t(this).hide()}});this.go=function(H,I){t(d.get(H)).fadeIn(f.duration);t(d.get(I)).fadeOut(f.duration);return H}},prev:"",next:"",duration:1000,delay:20*100,captionDuration:1000,outWidth:960,outHeight:360,width:960,height:360,caption:true,controls:true,autoPlay:true,bullets:true,stopOnHover:0,preventCopy:1},b);b.loop=b.loop||Number.MAX_VALUE;var E=i.find(".ws_images>*");var v=E.length;b.stopOn=((b.stopOn||0)+v)%v;var D;if(b.preventCopy){D=g('<div><a href="#" style="display:none;position:absolute;left:0;top:0;width:100%;height:100%"></a></div>').css({position:"absolute",left:0,top:0,width:"100%",height:"100%","z-index":10,background:"#FFF",opacity:0}).appendTo(i).find("A").get(0)}E.each(function(f){var d=g(this).html()||"";var t=d.indexOf(">",d);if(t>=0){g(this).data("descr",d.substr(t+1));if(t<d.length-1){g(this).html(d.substr(0,t+1))}}g(this).css({"font-size":0})});var k=E.find("IMG");var a=0;function s(t,f,d){t=((t%v)+v)%v;if(a==t){return}var t=o.go(t,a,f,d);if(t<0){return}r(t);if(b.caption){j(E[t])}a=t;if(b.onStep){b.onStep(t)}}var C,A,e=0;var u=i.get(0);if(u.addEventListener){u.addEventListener("touchmove",function(t){if(e){var f=(C-t.touches[0].pageX)/20;var d=(A-t.touches[0].pageY)/20;if((Math.abs(f)>1)||(Math.abs(d)>1)){C=A=e=0;y(t,a+((f+d)>0?1:-1),f,d)}}},false);u.addEventListener("touchstart",function(d){if(d.touches.length==1){C=d.touches[0].pageX;A=d.touches[0].pageY;e=1}else{e=0}},false);u.addEventListener("touchend",function(d){e=0},false)}function r(f){if(b.bullets){n(f)}if(D){var d=E.get(f).href;if(d){D.setAttribute("href",d);D.setAttribute("target",E.get(f).target);D.style.display="block"}else{D.style.display="none"}}}var q;function z(){w();if(b.autoPlay){q=setTimeout(function(){s(a<v-1?a+1:0);if(a==b.stopOn&&!--b.loop){b.autoPlay=0}z()},b.delay+b.duration)}}function w(){if(q){clearTimeout(q)}q=null}function y(H,t,f,d){w();H.preventDefault();s(t,f,d);z()}g(k.get(0)).css("z-index",1);k.css("position","absolute");if(typeof b.effect=="string"){b.effect=window["ws_"+b.effect]}var o=new b.effect(b,k,g(".ws_images",i));E.find("IMG").css("visibility","visible");var p=c=g(".ws_images",i);var m=" ";c=m?g("<div></div>"):0;if(c){c.css({position:"absolute",right:"2px",bottom:"2px",padding:"0 0 0 0"});p.append(c)}if(c&&document.all){var B=g('<iframe src="javascript:false"></iframe>');B.css({position:"absolute",left:0,top:0,width:"100%",height:"100%",filter:"alpha(opacity=0)"});B.attr({scrolling:"no",framespacing:0,border:0,frameBorder:"no"});c.append(B)}var F=c?g(document.createElement("A")):c;if(F){F.css({position:"relative",display:"block","background-color":"#E4EFEB",color:"#837F80","font-family":"Lucida Grande,sans-serif","font-size":"11px","font-weight":"normal","font-style":"normal","-moz-border-radius":"5px","border-radius":"5px",padding:"1px 5px",width:"auto",height:"auto",margin:"0 0 0 0",outline:"none"});F.attr({href:"http://"+m.toLowerCase()});F.html(m);F.bind("contextmenu",function(d){return false});c.append(F)}if(b.controls){var x=g('<a href="#" class="ws_next">'+b.next+"</a>");var h=g('<a href="#" class="ws_prev">'+b.prev+"</a>");i.append(x);i.append(h);x.bind("click",function(d){y(d,a+1)});h.bind("click",function(d){y(d,a-1)})}function G(){var t=i.find(".ws_bullets>div");var L=g("a",t);L.click(function(M){y(M,g(M.target).index())});var J=L.find("IMG");if(J.length){var I=g('<div class="ws_bulframe"/>').appendTo(t);var f=g("<div/>").css({width:J.length+1+"00%"}).appendTo(g("<div/>").appendTo(I));J.appendTo(f);g("<span/>").appendTo(I);var H=-1;function K(N){if(N<0){N=0}g(L.get(H)).removeClass("ws_overbull");g(L.get(N)).addClass("ws_overbull");I.show();var O={left:L.get(N).offsetLeft-I.width()/2};var M={left:-J.get(N).offsetLeft};if(H<0){I.css(O);f.css(M)}else{if(!document.all){O.opacity=1}I.stop().animate(O,"fast");f.stop().animate(M,"fast")}H=N}L.hover(function(){K(g(this).index())});var d;t.hover(function(){if(d){clearTimeout(d);d=0}K(H)},function(){L.removeClass("ws_overbull");if(document.all){if(!d){d=setTimeout(function(){I.hide();d=0},400)}}else{I.stop().animate({opacity:0},{duration:"fast",complete:function(){I.hide()}})}});t.click(function(M){y(M,g(M.target).index())})}}function n(d){g(".ws_bullets A",i).each(function(f){if(f==d){g(this).addClass("ws_selbull")}else{g(this).removeClass("ws_selbull")}})}if(b.caption){$caption=g("<div class='ws-title' style='display:none'></div>");i.append($caption);$caption.bind("mouseover",function(d){w()});$caption.bind("mouseout",function(d){z()})}function j(d){var H=g("img",d).attr("title");var t=g(d).data("descr");var f=g(".ws-title",i);f.stop(1,1).stop(1,1).fadeOut(b.captionDuration/3,function(){if(H||t){f.html((H?"<span>"+H+"</span>":"")+(t?"<div>"+t+"</div>":""));l(f,{direction:"left",easing:"easeInOutExpo",complete:function(){if(g.browser.msie){f.get(0).style.removeAttribute("filter")}},duration:b.captionDuration})}})}if(b.bullets){G()}r(0);if(b.caption){j(E[0])}if(b.stopOnHover){this.bind("mouseover",function(d){w()});this.bind("mouseout",function(d){z()})}z();function l(K,P){var M={};var N=["position","top","bottom","left","right"];for(var L=0;L<N.length;L++){M[N[L]]=K[0].style[N[L]]}K.show();var J={width:K.outerWidth(true),height:K.outerHeight(true),"float":K.css("float"),overflow:"hidden",left:K.position().left,top:K.position().top,opacity:0},f=g("<div></div>").css({fontSize:"100%",background:"transparent",border:"none",margin:0,padding:0});K.wrap(f);f=K.parent();if(K.css("position")=="static"){f.css({position:"relative"});K.css({position:"relative"})}else{g.extend(J,{position:K.css("position"),zIndex:K.css("z-index")});K.css({position:"relative",top:0,left:0,right:"auto",bottom:"auto"})}f.css(J).show();var O=P.direction||"left";var t=(O=="up"||O=="down")?"top":"left";var H=(O=="up"||O=="left");var d=P.distance||(t=="top"?K.outerHeight({margin:true}):K.outerWidth({margin:true}));K.css(t,H?(isNaN(d)?"-"+d:-d):d);var I={};I[t]=(H?"+=":"-=")+d;f.animate({opacity:1},{duration:P.duration,easing:P.easing});K.animate(I,{queue:false,duration:P.duration,easing:P.easing,complete:function(){for(var Q in M){K[0].style[Q]=M[Q]}K.parent().replaceWith(K);if(P.complete){P.complete()}}})}return this}}jQuery.extend(jQuery.easing,{easeInOutExpo:function(e,f,a,h,g){if(f==0){return a}if(f==g){return a+h}if((f/=g/2)<1){return h/2*Math.pow(2,10*(f-1))+a}return h/2*(-Math.pow(2,-10*--f)+2)+a}});
The rotator works perfectly with fading the images referenced in and out and the bullets for switching between images works great too, however I am looking to place text OVER the images so it can be highlighted/copied/etc. When I tried to put a SPAN in the code DIV the text I put into the SPAN (i.e. "TEXTTEXTTEXTTEXTTEXT") doesnt appear over the image. I dont know what else to do and Im not sure if its a javascript issue OR a coding issue within the page. Any ideas? Thanks NOTE: To be clear, I want four images, rotating, with four different text pieces to be placed OVER each image. So when one image rotates, its text change as well (to the next image and next set of text). |
|||||||