|
JavaScript - Page Slide Effect With Stationary Menu
Hi everyone,
I was wondering if jQuery or mootools has a set of scripts that creates a page slide effect with a stationary menu? What I mean is instead of loading a page when you click a link, all pages of the website are loaded at first, and then when a link is clicked, the corresponding page slides onto the screen. The navigation menu remains unchanged (except for dropdown menus) throughout everything. This is a perfect example of what I'm looking for: www.mimeartist.com Can anyone point me to the right direction? I tried to search for this but didn't come up with too many great results, and I searched the jQuery documentation and wasn't able to find a slider feature. Thanks. Similar TutorialsI am using ASP.NET and AJAX here. basically what I want is a nice little slide effect to show the next batch of images in a mini slide show. Example: << prev [image1] [image2] [image3] [image4] Next >> << prev [image5] [image6] [image7] [image8] Next >> so when the user presses next or previous, it will SLIDE to the left/right. the databinding is done at the server side end and in an update panel so it does an async postback when they press next/prev. how can I go about doing this type of effect? hi all hope someone can help me out here. The code below i found online and it works well but I would like it to slide rather than jump into posistion. Anyone know how I can adapt this or have another way of doing it?? what i like about this script is that it wont allow you to go beyond the bounds of the content when pressing the forward and back links but the transition needs a nice slide!!!. Example of how it works here Link Code: <head>
<style>
#contents{ position: relative; top: 0; left: 0; width: 786px; height: auto;}
#scrollable{ overflow: hidden; width: 786px; height: 400px; border: 1px
solid black;}
</style>
<script>
var t = 0;
function myback()
{
t += 786;
with(document.getElementById("contents"))
{
if (t > 0)
t = 0;
if(style)
style.left = t + "px";
else
setAttribute("style", "left: " + t + "px");
}
}
function myforward()
{
t -= 786;
with(document.getElementById("contents"))
{
if(t < -clientWidth)
t = -clientWidth;
if(style)
style.left = t + "px";
else
setAttribute("style", "left: " + t + "px");
}
}
</script>
</head>
<body>
<table>
<tr>
<td rowspan="2">
<div id="scrollable"><div id="contents">
<table width="1572" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="776" valign="top" bgcolor="#FFFF99">Some text!!!</td>
<td width="776" valign="top" bgcolor="#66FFFF"> Some Text!!!</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
<a href="javascript:void(0)" onclick="myback()">back</a>
<a href="javascript:void(0)" onclick="myforward()">forward</a>
</body>
Hope this is clear. Thanks. I found a very intressting JS function at this webpage: http://www.dynamicdrive.com/dynamici...edcollapse.htm I wonder if someone knows wihich part from the JS-file i should change/delete so i only get the fade at exempel 1 and not the slide/rolling effect. I only want the fade. The JS is: Code: //** Animated Collapsible DIV v2.0- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com.
//** May 24th, 08'- Script rewritten and updated to 2.0.
//** June 4th, 08'- Version 2.01: Bug fix to work with jquery 1.2.6 (which changed the way attr() behaves).
//** March 5th, 09'- Version 2.2, which adds the following:
//1) ontoggle($, divobj, state) event that fires each time a DIV is expanded/collapsed, including when the page 1st loads
//2) Ability to expand a DIV via a URL parameter string, ie: index.htm?expanddiv=jason or index.htm?expanddiv=jason,kelly
//** March 9th, 09'- Version 2.2.1: Optimized ontoggle event handler slightly.
//** July 3rd, 09'- Version 2.4, which adds the following:
//1) You can now insert rel="expand[divid] | collapse[divid] | toggle[divid]" inside arbitrary links to act as DIV togglers
//2) For image toggler links, you can insert the attributes "data-openimage" and "data-closedimage" to update its image based on the DIV state
var animatedcollapse={
divholders: {}, //structu {div.id, div.attrs, div.$divref, div.$togglerimage}
divgroups: {}, //structu {groupname.count, groupname.lastactivedivid}
lastactiveingroup: {}, //structu {lastactivediv.id}
preloadimages: [],
show:function(divids){ //public method
if (typeof divids=="object"){
for (var i=0; i<divids.length; i++)
this.showhide(divids[i], "show")
}
else
this.showhide(divids, "show")
},
hide:function(divids){ //public method
if (typeof divids=="object"){
for (var i=0; i<divids.length; i++)
this.showhide(divids[i], "hide")
}
else
this.showhide(divids, "hide")
},
toggle:function(divid){ //public method
if (typeof divid=="object")
divid=divid[0]
this.showhide(divid, "toggle")
},
addDiv:function(divid, attrstring){ //public function
this.divholders[divid]=({id: divid, $divref: null, attrs: attrstring})
this.divholders[divid].getAttr=function(name){ //assign getAttr() function to each divholder object
var attr=new RegExp(name+"=([^,]+)", "i") //get name/value config pair (ie: width=400px,)
return (attr.test(this.attrs) && parseInt(RegExp.$1)!=0)? RegExp.$1 : null //return value portion (string), or 0 (false) if none found
}
this.currentid=divid //keep track of current div object being manipulated (in the event of chaining)
return this
},
showhide:function(divid, action){
var $divref=this.divholders[divid].$divref //reference collapsible DIV
if (this.divholders[divid] && $divref.length==1){ //if DIV exists
var targetgroup=this.divgroups[$divref.attr('groupname')] //find out which group DIV belongs to (if any)
if ($divref.attr('groupname') && targetgroup.count>1 && (action=="show" || action=="toggle" && $divref.css('display')=='none')){ //If current DIV belongs to a group
if (targetgroup.lastactivedivid && targetgroup.lastactivedivid!=divid) //if last active DIV is set
this.slideengine(targetgroup.lastactivedivid, 'hide') //hide last active DIV within group first
this.slideengine(divid, 'show')
targetgroup.lastactivedivid=divid //remember last active DIV
}
else{
this.slideengine(divid, action)
}
}
},
slideengine:function(divid, action){
var $divref=this.divholders[divid].$divref
var $togglerimage=this.divholders[divid].$togglerimage
if (this.divholders[divid] && $divref.length==1){ //if this DIV exists
var animateSetting={height: action}
if ($divref.attr('fade'))
animateSetting.opacity=action
$divref.animate(animateSetting, $divref.attr('speed')? parseInt($divref.attr('speed')) : 500, function(){
if ($togglerimage){
$togglerimage.attr('src', ($divref.css('display')=="none")? $togglerimage.data('srcs').closed : $togglerimage.data('srcs').open)
}
if (animatedcollapse.ontoggle){
try{
animatedcollapse.ontoggle(jQuery, $divref.get(0), $divref.css('display'))
}
catch(e){
alert("An error exists inside your \"ontoggle\" function:\n\n"+e+"\n\nAborting execution of function.")
}
}
})
return false
}
},
generatemap:function(){
var map={}
for (var i=0; i<arguments.length; i++){
if (arguments[i][1]!=null){ //do not generate name/value pair if value is null
map[arguments[i][0]]=arguments[i][1]
}
}
return map
},
init:function(){
var ac=this
jQuery(document).ready(function($){
animatedcollapse.ontoggle=animatedcollapse.ontoggle || null
var urlparamopenids=animatedcollapse.urlparamselect() //Get div ids that should be expanded based on the url (['div1','div2',etc])
var persistopenids=ac.getCookie('acopendivids') //Get list of div ids that should be expanded due to persistence ('div1,div2,etc')
var groupswithpersist=ac.getCookie('acgroupswithpersist') //Get list of group names that have 1 or more divs with "persist" attribute defined
if (persistopenids!=null) //if cookie isn't null (is null if first time page loads, and cookie hasnt been set yet)
persistopenids=(persistopenids=='nada')? [] : persistopenids.split(',') //if no divs are persisted, set to empty array, else, array of div ids
groupswithpersist=(groupswithpersist==null || groupswithpersist=='nada')? [] : groupswithpersist.split(',') //Get list of groups with divs that are persisted
jQuery.each(ac.divholders, function(){ //loop through each collapsible DIV object
this.$divref=$('#'+this.id)
if ((this.getAttr('persist') || jQuery.inArray(this.getAttr('group'), groupswithpersist)!=-1) && persistopenids!=null){ //if this div carries a user "persist" setting, or belong to a group with at least one div that does
var cssdisplay=(jQuery.inArray(this.id, persistopenids)!=-1)? 'block' : 'none'
}
else{
var cssdisplay=this.getAttr('hide')? 'none' : null
}
if (urlparamopenids[0]=="all" || jQuery.inArray(this.id, urlparamopenids)!=-1){ //if url parameter string contains the single array element "all", or this div's ID
cssdisplay='block' //set div to "block", overriding any other setting
}
else if (urlparamopenids[0]=="none"){
cssdisplay='none' //set div to "none", overriding any other setting
}
this.$divref.css(ac.generatemap(['height', this.getAttr('height')], ['display', cssdisplay]))
this.$divref.attr(ac.generatemap(['groupname', this.getAttr('group')], ['fade', this.getAttr('fade')], ['speed', this.getAttr('speed')]))
if (this.getAttr('group')){ //if this DIV has the "group" attr defined
var targetgroup=ac.divgroups[this.getAttr('group')] || (ac.divgroups[this.getAttr('group')]={}) //Get settings for this group, or if it no settings exist yet, create blank object to store them in
targetgroup.count=(targetgroup.count||0)+1 //count # of DIVs within this group
if (jQuery.inArray(this.id, urlparamopenids)!=-1){ //if url parameter string contains this div's ID
targetgroup.lastactivedivid=this.id //remember this DIV as the last "active" DIV (this DIV will be expanded). Overrides other settings
targetgroup.overridepersist=1 //Indicate to override persisted div that would have been expanded
}
if (!targetgroup.lastactivedivid && this.$divref.css('display')!='none' || cssdisplay=="block" && typeof targetgroup.overridepersist=="undefined") //if this DIV was open by default or should be open due to persistence
targetgroup.lastactivedivid=this.id //remember this DIV as the last "active" DIV (this DIV will be expanded)
this.$divref.css({display:'none'}) //hide any DIV that's part of said group for now
}
}) //end divholders.each
jQuery.each(ac.divgroups, function(){ //loop through each group
if (this.lastactivedivid && urlparamopenids[0]!="none") //show last "active" DIV within each group (one that should be expanded), unless url param="none"
ac.divholders[this.lastactivedivid].$divref.show()
})
if (animatedcollapse.ontoggle){
jQuery.each(ac.divholders, function(){ //loop through each collapsible DIV object and fire ontoggle event
animatedcollapse.ontoggle(jQuery, this.$divref.get(0), this.$divref.css('display'))
})
}
//Parse page for links containing rel attribute
var $allcontrols=$('a[rel]').filter('[rel^="collapse["], [rel^="expand["], [rel^="toggle["]') //get all elements on page with rel="collapse[]", "expand[]" and "toggle[]"
$allcontrols.each(function(){ //loop though each control link
this._divids=this.getAttribute('rel').replace(/(^\w+)|(\s+)/g, "").replace(/[\[\]']/g, "") //cache value 'div1,div2,etc' within identifier[div1,div2,etc]
if (this.getElementsByTagName('img').length==1 && ac.divholders[this._divids]){ //if control is an image link that toggles a single DIV (must be one to one to update status image)
animatedcollapse.preloadimage(this.getAttribute('data-openimage'), this.getAttribute('data-closedimage')) //preload control images (if defined)
$togglerimage=$(this).find('img').eq(0).data('srcs', {open:this.getAttribute('data-openimage'), closed:this.getAttribute('data-closedimage')}) //remember open and closed images' paths
ac.divholders[this._divids].$togglerimage=$(this).find('img').eq(0) //save reference to toggler image (to be updated inside slideengine()
ac.divholders[this._divids].$togglerimage.attr('src', (ac.divholders[this._divids].$divref.css('display')=="none")? $togglerimage.data('srcs').closed : $togglerimage.data('srcs').open)
}
$(this).click(function(){ //assign click behavior to each control link
var relattr=this.getAttribute('rel')
var divids=(this._divids=="")? [] : this._divids.split(',') //convert 'div1,div2,etc' to array
if (divids.length>0){
animatedcollapse[/expand/i.test(relattr)? 'show' : /collapse/i.test(relattr)? 'hide' : 'toggle'](divids) //call corresponding public function
return false
}
}) //end control.click
})// end control.each
$(window).bind('unload', function(){
ac.uninit()
})
}) //end doc.ready()
},
uninit:function(){
var opendivids='', groupswithpersist=''
jQuery.each(this.divholders, function(){
if (this.$divref.css('display')!='none'){
opendivids+=this.id+',' //store ids of DIVs that are expanded when page unloads: 'div1,div2,etc'
}
if (this.getAttr('group') && this.getAttr('persist'))
groupswithpersist+=this.getAttr('group')+',' //store groups with which at least one DIV has persistance enabled: 'group1,group2,etc'
})
opendivids=(opendivids=='')? 'nada' : opendivids.replace(/,$/, '')
groupswithpersist=(groupswithpersist=='')? 'nada' : groupswithpersist.replace(/,$/, '')
this.setCookie('acopendivids', opendivids)
this.setCookie('acgroupswithpersist', groupswithpersist)
},
getCookie:function(Name){
var re=new RegExp(Name+"=[^;]*", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null
},
setCookie:function(name, value, days){
if (typeof days!="undefined"){ //if set persistent cookie
var expireDate = new Date()
expireDate.setDate(expireDate.getDate()+days)
document.cookie = name+"="+value+"; path=/; expires="+expireDate.toGMTString()
}
else //else if this is a session only cookie
document.cookie = name+"="+value+"; path=/"
},
urlparamselect:function(){
window.location.search.match(/expanddiv=([\w\-_,]+)/i) //search for expanddiv=divid or divid1,divid2,etc
return (RegExp.$1!="")? RegExp.$1.split(",") : []
},
preloadimage:function(){
var preloadimages=this.preloadimages
for (var i=0; i<arguments.length; i++){
if (arguments[i] && arguments[i].length>0){
preloadimages[preloadimages.length]=new Image()
preloadimages[preloadimages.length-1].src=arguments[i]
}
}
}
}
I am currently trying to convert a relatively simple slide effect in javascript to a fade effect, I have attached the code below and be grateful if anyone can help, var slider = null; var slider_next = null; $(function () { var interval = setInterval('rotate_slider()', 11000); pos = (window.location.pathname == "/" || window.location.pathname == "/home" ? '1280' : '1280'); $('#featuredSlider > div:not(:first)').attr('style','position:absolute;left:'+ pos +'px;width:1280px'); $('#featuredSlider > div:first').next().attr('style','position:absolute;left:0px;width:1280px'); $('#featuredShortcuts > div').click( function() { clearInterval(interval); sliders = $('#featuredSlider > div:not(:first)'); sliders.css({"left": "1280px", "opacity": 0}); var curr_div = $(this); var selected_div = $('#featuredShortcuts > div.selected'); selected_div.toggleClass('selected'); curr_div.toggleClass('selected'); sliders.eq( parseInt(selected_div.attr('id').substr(1, 1)) ).animate({"left": "-=1280px", "opacity": 0}, 1000); sliders.eq( parseInt(curr_div.attr('id').substr(1, 1)) ).animate({"left": "0px", "width": "1280px", "opacity": 1}, 1000); }); }); function rotate_slider() { var next = null; var curr_div = $('#featuredShortcuts > div.selected'); if( $('#featuredShortcuts > div:last').hasClass('selected') ) { next = $('#featuredShortcuts > div:first'); } else { next = curr_div.next(); } curr_div.toggleClass('selected'); next.toggleClass('selected'); if( ! slider ) { slider = $('#featuredShortcuts').next(); slider_next = slider.next(); } else if ( slider_next.html() == $('#featuredSlider > div:last').html() ) { slider = slider.next(); slider_next = $('#featuredShortcuts').next(); } else if ( slider.html() == $('#featuredSlider > div:last').html() ) { slider = $('#featuredShortcuts').next() slider_next = slider_next.next(); } else { slider = slider.next(); slider_next = slider.next(); } slider.animate({"left": "-=1280px", "opacity": 0}, 1000); slider_next.animate({"left": "0px", "width": "1280px","opacity": 1}, 1000, function () { slider.css('left', '1280px') }); } I am trying to make a simple slideout menu by increasing the height css attribute with the setTimeout() function making it rollout. It has partial functionality but it behaves pretty spazzy, here are my issues: 1. When I first load the page and mouse over the menu item, it does nothing. After mousing over it again, the menu does slide out but why does it not come out the first time? 2. As I go down the submenu items the whole menu flickers and it seems like its trying to rollout each time I change submenu items even though it is still within the same li element. 3. The last problem is even though I set my setTimeout() function to 1 millisecond delay it rolls out pretty slowly when in theory it should add 1 px per millisecond, causing it to rollout in about .1 of a second. Why would it be so slow? Here is the relevant code: Thanks for any help! Im just learning but it seems simple, just cant quite figure it out... html: Code: <li onmouseover="openMenuEffect('m3')" onmouseout="closeMenuEffect('m3')">
<a href="#" >Header</a>
<div id="m3" >
<a href="#">Sub 1</a>
<a href="#">Sub 2</a>
<a href="#">Sub 3</a>
</div>
</li>
javascript: Code: //this is the sliding menu:
function moveItAlong(id) {
var menu = document.getElementById(id);
var height = parseInt(menu.style.height);
height += 1 ;
menu.style.height = height + "px";
}
function openMenuEffect(m) {
var list = document.getElementById(m);
var i = parseInt(list.style.height)
if (i <= 100) {
moveItAlong(m);
setTimeout("openMenuEffect(\""+m+"\")",1);
}
}
function closeMenuEffect(m) {
var list = document.getElementById(m);
list.style.height = 0 + "px";
}
Hi all, I'm having an issue with a slide out menu and would appreciate some assistance. I feel like its most likely an easy fix which has escaped me over the last couple of days. Basically, I'm using tabbed navigation panes in the center column of a 3-column CSS layout. I'm wanting to place a functional slide out menu in EACH tab. As of now, I have one working perfectly in the intial tab, but I'm unable to achieve the same functionality in the remaining tabs. I can get the content loaded, but it is completely expanded...losing the collapsing/slide out action(s). I have added code for the content to be loaded into the 2nd tab, but have left the rest blank. I figure if the issue for tab 2 is resolved, I can apply it to the rest of the tabs. I am 99% sure the issue resides in the slide-out-menu-new.js file, but I can't seem to figure out where the functionality is being lost. Please assist if you would like. It would be GREATLY appreciated...this is the last hurdle I have before adding real content to the site. Please find the zip file containing all associated code/files by visiting the link below (a quick page posted for storage purposes only). http://www.truckerslifeline.com/siteHelp Thanks! I am having two problems with the script. 1. Sometimes when the page opens the slideout submenu shows on the left side of page, this always happens when my browser is full screen. 2. After clicking on 2 or more submenu links the submenu then overlaps the verticle black bar. http://villagehomegoods.com Appreciate any help. I have an assignemnt due next week and i am running into a problem of the webpage not sliding out the menus when the mouse is hovered over it. The directions were split up by each function code. Open the slidingmenu.js file and insert a command to run the function makeMenus when the browser has completed loading the page. Add the following three global variables to the file: currentSlide- used to reference the sliding menu currently displayed in the document. Set its initial value to null. timeID- used to reference timed interval commands. Set its initial value to null. leftPosition- used to store the left coordinate of the active sliding menu. Set its initial value to 0. Code: window.onload = makeMenus; var currentSlide = null; var timeID = null; var leftPosition = 0; 8. Add the makeMenus() function. The purpose of this function is to create a reference to all sliding menus in the document and to apply event handlers to objects in the document. Add the following commands to the function: a. Create an instance of the array object named slideMenus. b. Use the getElementsByTagName() method to store all of the elements in the document in an array named allElements. c. Loop through the elements in the allElements array, pushing all of the elements belonging to the slideMenu class into the slideMenus array. d. Loop through all of the items in the slideMenus array and apply the onmouseover event handler to those objects to run the showSlide() function. Also, for each object in the slideMenus array, reference the first ul element within that object and set the value of the ul elements left style property to 0px. This command moves all sliding menus (enclosed in unordered lists) to the far left of the page. That can be accomplished with this line of code, where j is the counter variable in a for loop: slideMenus[j].getElementByTagName("ul")[0]style.left="0px"; e. Add onclick event handlers to the elements with ID values of head and main, running the closeSlide function. Code: function makeMenus() {
var slideMenus = new Array();
var allElements = document.getElementsByTagName("*");
for (var i = 0; i < allElements; i++) {
if (allElements[i].className == "slideMenu") slideMenus.push(allElements[i]);
}
for (var i = 0; i < slideMenus.length; i++) {
slideMenus[i].onmouseover = showSlide;
slideMenus[i].getElementsByTagName("ul")[0].style.left = "0px";
}
document.getElementById("head").onclick = closeSlide;
document.getElementById("main").onclick = closeSlide;
}
9. Add the showSlide() function to the file. The purpose of this function is to display a sliding menu on the Web page. In the first line of the function, create a variable named slideList that stores an object reference to the first ul element nested within the current object (as referenced by the this keyword). slideList=this.getElementByTagName("ul")[0]; 10. Add an if statement to the showSlide() function. The purpose of the if statement is to test whether a sliding menu is currently displayed on the page. If the currentSlide object is equal to null OR the ID of the currentSlide is not equal to the ID of the slideList variable, then do the following: . Run the closeSlide() function. a. Set the currentSlide variable equal to the slideList variable. b. Set the display style of the currentSlide variable to block. c. Run the moveSlide() function repeated at intervals of 1 millisecond. Store the ID of the timed function in timeID. Code: function showSlide() {
var slideList = this.getElementsbyTagName("ul")[0];
if ((currentSlide = null) || (currentSlide != slideList)) {
closeSlide();
currentSlide = slideList;
currentSlide.style.display = "block";
timeID = setInterval("moveSlide()", 1);
}
}
11. Add the closeSlide() function. The purpose of this function is to close any active sliding menu. Use object detection to confirm that the currentSlide variable is not equal to null and then run the following commands: . Clear the timed function referenced by the timeID variable. a. Set the left style of the currentSlide object to 0px and set the display style to none. b. Set the value of currentSlide to null Code: function closeSlide() {
if (currentSlide) {
currentSlide.style.display = "none";
currentSlide = null;
}
clearInterval(timeID);
currentSlide.style.left = "0px";
currentSlide.style.display = "none";
currentSlide = null;
}
12. Add the moveSlide() function. The purpose of this function is to move a sliding menu horizontally across the page until the left coordinate of the menu exceeds 220 pixels. Add the following commands to the function: . Increase the value of the leftPosition variable by 5. a. If the value of the left position of the currentSlide object is less than or equal to 220: if parseInt((currentSlide.style.left) <=220) { then set the left style of that object to the coordinates leftPositionpx where leftPosition is the value of the leftPosition variable. b. Otherwise, clear the timed function referenced by the timeID variable and reset the value of the leftPosition variable to 0. Code: function moveSlide() {
leftPosition = leftPosition + 5;
if (parseInt(currentSlide.style.left) <= 220) {
object.style.left = leftPosition + "px";
} else {
clearInterval(timeID);
leftPosition = 0;
}
}
Where did i go wrong? The website is hosted here. Hi People, I've used the Concertina Menu from Stu Nicholls on one of my websites and am trying to get the Menu slider to slide up automatically after a certain time. Currently it only slides up on a mouseclick. The working link can be found at www.atomwhale.com/share/clients/branch/website/home.html Hope someone can help me in getting this to work. thanks, Jeriel. Hi there, I have a page with 2 navigation menus as well as a slide show (3 separate .js files). I can get them all to work individually but not all together, at the same time. I looked over you FAQ section but I can't seem to figure it out. Any help would be hugely appreciated. Thank you so much. HTML: Quote: <!-- Main content --> <div id="content"> <div style="text-align:center"> <img id="pic" src="images/slideshow/slideshow1.jpg" width="600" height="600" alt="slideshow" /> </div> <script type="text/javascript" src="slideshow.js"></script> </div> <!-- Site navigation menu --> <div id="navcontainer"> <ul> <li> <div align="center"><img src="images/logo1.jpg" id="logo" alt="Logo" /></div> </li> <li><img src="images/buttons/teamandcorpsports1.jpg" id="teamandcorpsports" alt="Team and Corporate Sports" width="224" height="37" /></li> <li><img src="images/buttons/performancesports1.jpg" id="performancesports" alt="Performance Sports" width="224" height="37" /></li> <li><img src="images/buttons/flagsandbanners1.jpg" id="flagsandbanners" alt="Flags and Banners" width="224" height="37" /></li> <li><img src="images/buttons/home1.jpg" id="home" alt="Home" width="224" height="37" /></li> <li><img src="images/buttons/catalogues1.jpg" id="catalogues" alt="Catalogues" width="224" height="37" /></li> <li><img src="images/buttons/galleries1.jpg" id="galleries" alt="Galleries" width="224" height="37" /></li> <li><img src="images/buttons/designown1.jpg" id="designown" alt="Design your Own" width="224" height="37" /></li> </ul> </div> <script type="text/javascript" src="navigation.js"></script> <div id="footer"> <!-- Site navigation menu - footer --> <div id="navcontainer_footer"> <ul> <li><img src="images/buttons/dealerlogin1.jpg" id="dealerlogin" alt="Dealer Log in" width="102" height="29" /></li> <li><img src="images/buttons/contactus1.jpg" id="contactus" alt="Contact Us" width="102" height="29" /></li> <li><img src="images/buttons/dealersignup1.jpg" id="dealersignup" alt="Sign Up to be a Dealer Here" width="102" height="29" /></li> </ul> </div> <script type="text/javascript" src="navigation_bottom.js"></script> </div> </div> <!-- End Wrapper --> slideshow.js Quote: var pause = 3000; // interval, in milliseconds, between transitions var i = 0; // image counter var pic = document.getElementById("pic"); // the <img> element in the HTML file // define an array of images var imgs = new Array("images/slideshow/slideshow1.jpg", "images/slideshow/slideshow2.jpg", "images/slideshow/slideshow3.jpg", "images/slideshow/slideshow4.jpg", "images/slideshow/slideshow5.jpg", "images/slideshow/slideshow6.jpg", "images/slideshow/slideshow7.jpg" ); // preload the images for (var j = 0; j < imgs.length; j++) { var obj = new Image(); obj.src = imgs[j]; } // rotates between the images in the "imgs" array function rotate() { pic.src = imgs[i]; if (i === (imgs.length -1)) { i = 0; } else { i++; } setTimeout("rotate()", pause); } window.onload = rotate; navigation_bottom.js Quote: // define an array of images var navImgs = new Array("images/buttons/dealerlogin1.jpg", "images/buttons/contactus1.jpg", "images/buttons/dealersignup1.jpg"); // preload the images by iterating the array for (var i = 0; i < navImgs.length; i++) { var obj = new Image(); obj.src = navImgs[i]; } // initialize the onmouseover and onmouseout events function init() { // get all the <img> tags in the HTML document as an array var navContainer = document.getElementById("navcontainer_footer"); var imgArray = navContainer.getElementsByTagName("img"); // var imgArray = document.getElementsByTagName("img"); // loop through the array and bind the onmouseout and onmouseover events for (var i = 0; i < imgArray.length; i++) { var img = imgArray[i]; img.onmouseover = doMouseOver; img.onmouseout = doMouseOut; } } // define the function for the onmouseover event function doMouseOver(e) { var img; if (!e) // IE { e = window.event; // get the <img> element for IE that triggered the event img = e.srcElement; } else { // get the <img> element for FF that triggered the event img = e.target; } // extract the digit only from the "id" attribute value and concatenate it // to the image src for a result of "images/pic1.jpg", "images/pic2.jpg" or "images/pic3.jpg" var id = img.id; img.src = "images/buttons/" + id + ".jpg"; //img.src = "images/pic" + id.substring("pic".length) + ".jpg"; } // define the function for the onmouseout event function doMouseOut(e) { var img; if (!e) // IE { e = window.event; // get the <img> element for IE that triggered the event img = e.srcElement; } else { // get the <img> element for FF that triggered the event img = e.target; } //img.src = "images/button_home1.jpg"; var id = img.id; img.src = "images/buttons/" + id + "1.jpg"; } // call the "init" function to initialize the event binding //window.onload = init; navigation.js Quote: // define an array of images var navImgs = new Array("images/buttons/logo1.jpg", "images/buttons/teamandcorpsports1.jpg", "images/buttons/performancesports1.jpg", "images/buttons/flagsandbanners1.jpg", "images/buttons/home1.jpg", "images/buttons/catalogues1.jpg", "images/buttons/galleries1.jpg", "images/buttons/designown1.jpg"); // preload the images by iterating the array for (var i = 0; i < navImgs.length; i++) { var obj = new Image(); obj.src = navImgs[i]; } // initialize the onmouseover and onmouseout events function init() { // get all the <img> tags in the HTML document as an array var navContainer = document.getElementById("navcontainer"); var imgArray = navContainer.getElementsByTagName("img"); // var imgArray = document.getElementsByTagName("img"); // loop through the array and bind the onmouseout and onmouseover events for (var i = 0; i < imgArray.length; i++) { var img = imgArray[i]; img.onmouseover = doMouseOver; img.onmouseout = doMouseOut; } } // define the function for the onmouseover event function doMouseOver(e) { var img; if (!e) // IE { e = window.event; // get the <img> element for IE that triggered the event img = e.srcElement; } else { // get the <img> element for FF that triggered the event img = e.target; } // extract the digit only from the "id" attribute value and concatenate it // to the image src for a result of "images/pic1.jpg", "images/pic2.jpg" or "images/pic3.jpg" var id = img.id; img.src = "images/buttons/" + id + ".jpg"; //img.src = "images/pic" + id.substring("pic".length) + ".jpg"; } // define the function for the onmouseout event function doMouseOut(e) { var img; if (!e) // IE { e = window.event; // get the <img> element for IE that triggered the event img = e.srcElement; } else { // get the <img> element for FF that triggered the event img = e.target; } //img.src = "images/button_home1.jpg"; var id = img.id; img.src = "images/buttons/" + id + "1.jpg"; } // call the "init" function to initialize the event binding //window.onload = init; Help, I have a navigation menu that has a flyin effect for each item using Javascript. Right now, The Javascript flys in a picture (in the same location) no matter what item you hover over. How can I get it to fly into a different position for each item. Here is my code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script src="hoverIntent.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#nav a").append("<em></em>");
$("#nav a").hoverIntent(function () {
$(this).find("em").animate({ opacity: "show", top: "-34" }, "fast");
var hoverText = $(this).attr("title");
$(this).find("em").text(hoverText);
}, function () {
$(this).find("em").animate({ opacity: "hide", top: "-43" }, "fast");
});
});
</script>
<style type="text/css">
body {
margin: 0px;
}
#nav
{
border-top: 2px solid #000;
border-bottom:2px solid #000;
width: 100%;
height: 36px;
line-height: 36px;
float: left;
background:url("images/OFF2.gif") repeat-x top left;
}
#nav ul {
list-style: none;
width: 900px;
margin: 0 auto;
padding: 0;
position:relative;
}
#nav li {
float: left;
}
#nav li em {
background: url(images/home.png) no-repeat;
width: 180px;
height: 45px;
position: absolute;
top: -43px;
left: 0px;
padding: 20px 12px 10px;
z-index: 1;
display: none;
}
#nav li a {
font-family:"Georgia", "Sans-Serif";
display: inline-block;
text-decoration: none;
font-size:medium;
padding: 0px 5px;
text-align:center;
color: #000;
width:110px;
height: 36px;
line-height: 36px;
background:transparent url("images/off.gif") no-repeat top right;
}
#nav li a:hover {
font-family:"Georgia", "Sans-Serif";
display: inline-block;
text-decoration: none;
font-weight:bold;
font-size:medium;
padding: 0px 5px;
width:110px;
height: 36px;
line-height: 36px;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
<li><a href="#">Item3</a></li>
<li><a href="#">Item4</a></li>
</ul>
</div>
</body>
</html>
Thank you! I have a slideshow on the "Projects" page. The javascript is external. There's a link on the homepage that when clicked needs to open the Projects page with the appropriate slide loaded. How do I do that? Here's the code I have for the slideshow: Code: var prev = document.getElementById('prev');
var next = document.getElementById('next');
var current = 0;
function prevPic() {
clearInterval(interval);
if(current > 0) {
current--;
if(current == 0) {
document.getElementById('next').src = "images/right_arrow.jpg";
document.getElementById('prev').src = "images/left_arrow_off.jpg";
} else {
document.getElementById('next').src = "images/right_arrow.jpg";
document.getElementById('prev').src = "images/left_arrow.jpg";
}
update();
}
}
function nextPic() {
clearInterval(interval);
if(current < slides.length - 1) {
current++;
if(current == slides.length - 1) {
document.getElementById('next').src = "images/right_arrow_off.jpg";
document.getElementById('prev').src = "images/left_arrow.jpg";
} else {
document.getElementById('next').src = "images/right_arrow.jpg";
document.getElementById('prev').src = "images/left_arrow.jpg";
}
update();
}
}
function update() {
var pic = slides[current];
document.getElementById('project_title').innerHTML = pic.title;
document.getElementById('project_image').src = "images/slides/" + pic.image;
document.getElementById('project_location').innerHTML = "<span>Location:</span> " + pic.location;
document.getElementById('project_operation').innerHTML = "<span>Commercial Operation:</span> " + pic.commercial_operation;
document.getElementById('counter').innerHTML = (current + 1) + " of " + slides.length;
if(pic.link) {
document.getElementById('project_link').style.display = "block";
document.getElementById('project_href').href = pic.link;
} else {
document.getElementById('project_link').style.display = "none";
}
}
//preload slides
var images = [];
for(i in slides) {
var img = new Image();
img.src = "images/slides/" + slides[i].image;
images.push(img);
}
Hi everyone, Im new to the whole website thing as a whole but my mate got me onto joomla which has been great and iv got a site up im almost happy with and have learnt quite alot about coding etc. My problem is: Im utilising a vertical menu, just simple text as links, i want to add an effect on hover and clicking on that makes the text slide elegantly to the right about 16pixels. I have another unpublished template that iv bought (that doesnt quite work at all, module position all messed up etc) but it does this hover effect perfectly on the menu. So i have the .js file from that template and iv read some tutorials on how to add a js file to my template but its just not doing anything. Is it a good idea to try to add this file from a different template to my template or is there a easier way to do this (what i think is a) simple effect. Thanks. ps i can post the js code if wanted Hello all, Firstly apologies for my javascript ignorance - I'm not a programmer, just someone thrust into programming since there's no-one else at my company who can do it. I found a nice js script online for a drop-down menu where the drop downs both expand to their full size and fade-in (very quickly) from transparent. The script in action can be seen on the script writer's site he http://sandbox.leigeber.com/dropdown-menu/index.html and the script is: Code: var menu=function(){
var t=15,z=50,s=6,a;
function dd(n){this.n=n; this.h=[]; this.c=[]}
dd.prototype.init=function(p,c){
a=c; var w=document.getElementById(p), s=w.getElementsByTagName('ul'), l=s.length, i=0;
for(i;i<l;i++){
var h=s[i].parentNode; this.h[i]=h; this.c[i]=s[i];
h.onmouseover=new Function(this.n+'.st('+i+',true)');
h.onmouseout=new Function(this.n+'.st('+i+')');
}
}
dd.prototype.st=function(x,f){
var c=this.c[x], h=this.h[x], p=h.getElementsByTagName('a')[0];
clearInterval(c.t); c.style.overflow='hidden';
if(f){
p.className+=' '+a;
if(!c.mh){c.style.display='block'; c.style.height=''; c.mh=c.offsetHeight; c.style.height=0}
if(c.mh==c.offsetHeight){c.style.overflow='visible'}
else{c.style.zIndex=z; z++; c.t=setInterval(function(){sl(c,1)},t)}
}else{p.className=p.className.replace(a,''); c.t=setInterval(function(){sl(c,-1)},t)}
}
function sl(c,f){
var h=c.offsetHeight;
if((h<=0&&f!=1)||(h>=c.mh&&f==1)){
if(f==1){c.style.filter=''; c.style.opacity=1; c.style.overflow='visible'}
clearInterval(c.t); return
}
var d=(f==1)?Math.ceil((c.mh-h)/s):Math.ceil(h/s), o=h/c.mh;
c.style.opacity=o; c.style.filter='alpha(opacity='+(o*100)+')';
c.style.height=h+(d*f)+'px'
}
return{dd:dd}
}();
with Code: var menu=new menu.dd("menu");
menu.init("menu","menuhover");
used on my html page to call the script. I'm using the script exactly as written and exactly as it is on the dude's demo page for it. However, some of my sub-menu items are wider than their parent items and in IE7 this means they are bound to the width of the parent until the animations have finished, and then pop-out to their full width (NB not an issue in FF3). I'm actually not too fussed about either the fade in or expand out effects (they'd be nice, but not at the expense of the IE7 bug) so I simply wanted to know what I should do to the script to turn off the effects, or make them instant - ie reduce the length of the effect to as short as possible. I understand I can get rid of the bug by specifying a width for the ul element in my css, but I'd rather not do that if I can help it. I'd appreciate anyone's insight on this. Thanks Tom I know this is a common problem, and each slide show script is a bit different and I can't get this to work exactly right: http://www.javascriptkit.com/script/...ifferent.shtml I've got two tables containing mouseover image "slide" shows - numbered sequentially but both are on the same index.html page. One image show comes up with the first navigation link, the second image show comes up with the second navigation link. The first image show works, the second doesn't - could you tell me what is causing that. there is a javascript glider that requires them both to be on the same page. link to the page here . . . http://www.sunupdesignbuild.com/NEW/index.html appreciate your help thank you T I've got a client using JQuery pageslide function on a wordpress site - http://srobbin.com/blog/jquery-pageslide/ There is a sidebar menu on the left and about 5 pages in the right hand side. So you click one of the links on the sidebar menu and it slides to one of the 5 corresponding pages. I guess the 5 pages are all really one page though within the slider app? I'm wondering if it's possible to link directly to a page within the slider... because right now it always goes to the first page of the 5. And is there a way to program it so the back button in the browser makes the page slide go back to the previous page, rather than going to the last actual page in the browser? Hi first time poster scratching his head. I am dipping into php to create a user profilepage.php template on a wordpress site. I have managed against all odds to create a user profile that will take info from Code: ?php the_author_meta('occupation'); ?
etc, but my head is spinning trying to create an accordion for a photogallery Code: ?php echo do_shortcode("[photosmash]"); ?
and youtube playlist Code: ?php (the_author_meta('youtube_playlist')); ?
so I want to click on an image "MY VIDEOS" and the youtube playlist drops down, ditto with MY PHOTOS, click on the image and the gallery appears. The page with all the required content showing is http://traditionalpainter.com/andy-crichton I would really appreciate it if someone can point me in the right direction to code that will hide the gallery and video until required. Thanks in advance. Hi, I'm a complete novice using javascript. I'm trying to get a mootools plugin to work with a slide in/slide out javascript using multiple divs. Here's the page: http://pawsdogs.com/test/Site/work2.htm The mootools code (Noobslide) slides a main image on the right when you click thumbnails on the left, which are wrapped in a thumb mask using CSS. The first row of thumbnails works perfectly, but when it's passed on to the next div the mask isn't passed on and the effect breaks down. Thanks so much if anyone can help! Here's the html: Code: <li><a href="#" id="slidecontrol_2" class="slidecontrol">Click Here</a>
<div id="slidedisplay_2" style="display:none;">
<div id="thumbs7">
<div class="thumbs">
<div><img src="images2/img4.jpg" alt="Photo Thumb" /></div>
<div><img src="images2/img5.jpg" alt="Photo Thumb" /></div>
<div><img src="images2/img6.jpg" alt="Photo Thumb" /></div>
</div>
<div id="thumbs_mask7"></div>
<p id="thumbs_handles7">
<span></span>
<span></span>
<span></span>
</p>
</div>
</div></li>
<li><a href="#" id="slidecontrol_3" class="slidecontrol">asdf</a>
<div id="slidedisplay_3" style="display:none;">
<div id="thumbs7">
<div class="thumbs">
<div><img src="images2/img2.jpg" alt="Photo Thumb" /></div>
<div><img src="images2/img3.jpg" alt="Photo Thumb" /></div>
</div>
<div id="thumbs_mask7"></div>
<p id="thumbs_handles7">
<span></span>
<span></span>
</p>
</div>
</div>
The javascript: Code: $(document).ready(function () {
$('a.slidecontrol').click(function(){
var $this = $(this);
var divID = $this.attr("id").replace("slidecontrol_", "slidedisplay_");
var $div = $('#'+divID);
if ($div.is(':visible')) {
$div.slideUp(500);
} else {
$div.slideDown(500);
}
return false;
});
});
The CSS: Code: #thumbs7{
position:relative;
width:200px;
clear:both;
height:41px;
overflow:hidden;
}
#thumbs7 .thumbs, #thumbs_handles7, #thumbs_mask7{
position:absolute;
top:0;
width:100%;
height:41px;
}
#thumbs7 .thumbs div, #thumbs_handles7 span{
display:block;
width:60px;
height:41px;
margin:0;
float:left;
cursor:pointer;
}
#thumbs7 .thumbs div img{
width:54px;
float:right;
}
#thumbs_handles7 span{
background:url(../images2/thumb_invisible.gif) no-repeat;
}
#thumbs_mask7{
width:1200px;
background:url(../images2/thumbs_mask.gif) no-repeat center top;
}
Hi, I am somewhat new to HTML, AJAX, and CSS. I'm wish to implement something similar to what Tumblr does on their front page where you click on the bottom footer bar, and the page horizontally shifts up keeping part of the original page (specifically, the email sign up) visible while exposing more content. I know the simplest is to have the entire content on the page and just "hide" and "show" the interested components "on click" of the bottom footer bar div-tag. But I like the sliding animation. Does YUI or JQuery provide the ability to do the animation? Or is this even a Javascript related functionality - ie should I look at HTML5 or CSS? Thanks Jack I want to insert this star trail effect script to page below but star trail doesn't appear on most areas and script corrupts several objects' position. How can I insert it successfully? http://www.orkinosfilm.com/melissa/index.html Code: <head>
<style type="text/css">
body {overflow: scroll; overflow-x: hidden;}
.anyClass {
position: relative;
visibility: hidden;
left: -5000px;
}
</style>
</head>
<body bgcolor="#000000">
<p><!--webbot bot="HTMLMarkup" startspan --><script language="JavaScript1.2">
<!--
/*
Submitted by Marcin Wojtowicz [one_spook@hotmail.com]
Featured on JavaScript Kit (http://javascriptkit.com)
Modified by JK to be IE7+/ Firefox compatible
For this and over 400+ free scripts, visit http://javascriptkit.com
*/
var trailLength = 10 // The length of trail (8 by default; put more for longer "tail")
var path = "cursor_star.png" // URL of your image
var standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
var i,d = 0
function initTrail() { // prepares the script
images = new Array() // prepare the image array
for (i = 0; i < parseInt(trailLength); i++) {
images[i] = new Image()
images[i].src = path
}
storage = new Array() // prepare the storage for the coordinates
for (i = 0; i < images.length*3; i++) {
storage[i] = 0
}
for (i = 0; i < images.length; i++) { // make divs for IE and layers for Navigator
document.write('<div id="obj' + i + '" style="position: absolute; z-Index: 100; height: 0; width: 0"><img src="' + images[i].src + '" width='+(16-i)+' height='+(16-i)+'></div>')
}
trail()
}
function trail() { // trailing function
for (i = 0; i < images.length; i++) { // for every div/layer
document.getElementById("obj" + i).style.top = storage[d]+'px' // the Y-coordinate
document.getElementById("obj" + i).style.left = + storage[d+1]+'px' // the X-coordinate
d = d+2
}
for (i = storage.length; i >= 2; i--) { // save the coordinate for the div/layer that's behind
storage[i] = storage[i-2]
}
d = 0 // reset for future use
var timer = setTimeout("trail()",10) // call recursively
}
function processEvent(e) { // catches and processes the mousemove event
if (window.event) { // for IE
storage[0] = window.event.y+standardbody.scrollTop+10
storage[1] = window.event.x+standardbody.scrollLeft+10
} else {
storage[0] = e.pageY+12
storage[1] = e.pageX+12
}
}
initTrail()
document.onmousemove = processEvent // start capturing
//-->
</script><!--webbot bot="HTMLMarkup" endspan --></p>
</body>
|
|||||||