JavaScript - Problem With Icemegamenu Not Horizontal

Hi All,

Does anyone know of any good horizontal accordion scripts that use jquery, like this one:

http://www.slidedeck.com/

I would like something very similar to that but unfortunately the free version is as customizable as I need it to be.

I've done a Google search but found nothing as of yet...

Thanks,

Greens85

Hi,

I need some help with getting the browser to automatically scroll to the top when the user slides horizontally. It's probably easier for you to see what I mean! http://www.zabirvalliji.co.uk This is my website (still a working progress!!). If you click the links you will see the website scrollings horizontally. If you scroll to the bottom of 'portfolio', and then click another section, you will see that the browser stays at the bottom. Basically, I want the browser to automatically slide to the top whenever the user goes to another section.

Is anyone able to help me?

I have a working code of 2 level horizontal tab menu....it is now onmouse over ,I want to convert it to onclick....can anyone help in this regard..

I have taken from....
http://www.javascriptkit.com/script/...leveltab.shtml

The javascript....
Code:

var mastertabvar=new Object()
mastertabvar.baseopacity=0
mastertabvar.browserdetect=""

function showsubmenu(masterid, id){
if (typeof highlighting!="undefined")
clearInterval(highlighting)
submenuobject=document.getElementById(id)
mastertabvar.browserdetect=submenuobject.filters? "ie" : typeof submenuobject.style.MozOpacity=="string"? "mozilla" : ""
hidesubmenus(mastertabvar[masterid])
submenuobject.style.display="block"
instantset(mastertabvar.baseopacity)
highlighting=setInterval("gradualfade(submenuobject)",50)
}

function hidesubmenus(submenuarray){
for (var i=0; i<submenuarray.length; i++)
document.getElementById(submenuarray[i]).style.display="none"
}

function instantset(degree){
if (mastertabvar.browserdetect=="mozilla")
submenuobject.style.MozOpacity=degree/100
else if (mastertabvar.browserdetect=="ie")
submenuobject.filters.alpha.opacity=degree
}


function gradualfade(cur2){
if (mastertabvar.browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99)
else if (mastertabvar.browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (typeof highlighting!="undefined") //fading animation over
clearInterval(highlighting)
}

function initalizetab(tabid){
mastertabvar[tabid]=new Array()
var menuitems=document.getElementById(tabid).getElementsByTagName("li")
for (var i=0; i<menuitems.length; i++){
if (menuitems[i].getAttribute("rel")){
menuitems[i].setAttribute("rev", tabid) //associate this submenu with main tab
mastertabvar[tabid][mastertabvar[tabid].length]=menuitems[i].getAttribute("rel") //store ids of submenus of tab menu
if (menuitems[i].className=="selected")
showsubmenu(tabid, menuitems[i].getAttribute("rel"))
menuitems[i].getElementsByTagName("a")[0].onmouseover=function(){
showsubmenu(this.parentNode.getAttribute("rev"), this.parentNode.getAttribute("rel"))
}
}
}
}

Hello,
Currently I'm looking at smooth scrolling Js scripts for thumb images which can be altered to accomodate needs. I found one here that has some desirable effects but has no navi buttons.

Would it be sensible to alter and point the hovering mouse scroll function to buttons, or would it be a better idea to keep looking for exactly the right script?

The 2 identical scrollers on this page are the look I want but these are flash;

http://area.autodesk.com/

ps: I've no experience of Js but can pick things up pretty quickly.

I am trying to get the menu bar to also have a "<" on the other side, so i can control the menu to the left also, Thanks in advance
Code:

<style>
	#hmenu {position:absolute; overflow: hidden; left: -275px; width:350px; height:30px; border: solid 1px #339900; padding: 5px; font-family: arial, sans-serif;}
	#harrow {position: absolute; left: 325px; top: 5px; border: solid 1px #339900; font-weight: bold; width:20px; height: 18px; text-align:center; background-color:#336600; }
	
	a {text-decoration: none;}
	#harrow a {color: white}
	
</style>

<script>

	function move(menu_id,mTop,mLeft){
		var obj = document.getElementById(menu_id);
		obj.style.top =  obj.offsetTop+mTop +"px";
		obj.style.left = obj.offsetLeft+mLeft+"px";
	}
</script>

</HEAD>

<BODY>

<div id=hmenu>
<a href=#>Link 1</a> | <a href=#>Link 2</a> | <a href=#>Link 3</a> | <a href=#>Link 4</a> | <a href=#>Link 5</a>
<div id=harrow><a href="#" onclick="move('hmenu',0,295)"> > </a></div>

Hi,

I have a textbox placed inside a scroll pane which I need to scroll horizontally once the end of the box is reached and only go on a new line when I tell it to
The scroll pane works fine vertically, adding a scroll bar once the bottom of the box has been reached but i cant get it to add the horizontal one. It just automatically puts the text onto a new line was it reaches the edge of the text box.

Why wont it automatically scroll horizontal?

Hi all,

I am having problems with a script 'Cut & Paste CSS Horizontal List Menu' from http://www.javascriptkit.com/script/...stopmenu.shtml

It works on my site with Firefox but not IE 8.

My site url is http://www.bridgepoint-llp.co.uk/
I would be grateful for any help anyone could supply

http://www.mainstudio.com/

Can anyone recommend a code to create an expandable panel similar the one in this link, but one which expands and collapses horizontally as opposed to vertically?

Also, to include the functionality of having content inside each panel load only after its clicked.

Hello,

I'm Chris, welcome everyone. I'm in a need of help. I'm writing application that displays messages from users. This messages are kept in external XML file and every time user post a new message this XML document is appended.

What I want to do is to display all messages at the bottom of screen. Messages have to slide horizontally in one line. To do that I used this code:

Code:

horizontalScroll.js:
var scrllTmr;
window.onload = function(){
	document.getElementById('scroll').style.overflow = 'hidden';
	document.getElementById('scrollme').style.float = 'left';
	document.getElementById('scrollme').style.position = 'relative';

	cw = parseInt(document.getElementById('scroll').offsetWidth/2);
	w = parseInt(document.getElementById('scrollme').offsetWidth/2);
	
	lft = cw + w;
	document.getElementById('scrollme').style.left = lft + "px";
	scrollStep(cw,w,lft);
}
function scrollStep(cw,w,lft){
	if(lft == w * -1)
		lft = cw + w;
	document.getElementById('scrollme').style.left = lft + "px";
	
	if(scrllTmr)
		clearTimeout(scrllTmr);
	scrllTmr = setTimeout('scrollStep(cw,w,' + (lft - 1) + ')',10);
}

index.html:
<div id="scroll"><div id="scrollme">
<h1 style="white-space: nowrap;">Lets scroll this right here 1 | Lets scroll this right here 2 | Lets scroll this right here 3 | Lets scroll this right here 4 | Lets scroll this right here 5 | Lets scroll this right here 6 | Lets scroll this right here 7 | Lets scroll this right here 8 | Lets scroll this right here 9 | Lets scroll this right here 10 | Lets scroll this right here 11 | Lets scroll this right here  12 | Lets scroll this right here 13 | Lets scroll this right here 14 | Lets scroll this right here 15 | Lets scroll this right here 16 | Lets scroll this right here 17 | Lets scroll this right here 18 | Lets scroll this right here 19 | Lets scroll this right here 20
</h1></div></div>

The problem with that code is that at 1/3 length of text it starts from beginning and this is wrong. The text have to scroll to the very end and then start to scroll from beginning again.

Another thing, that I'm unable to deal with is refreshing/reloading the content from XML file. What I need to do is to check if XML was changed/appended and if it was then I have to add this added message to text that scrolls horizontally and view it at the end of horizontal text. I'm pretty sure I have to use Ajax here. Also, if text from XML file will be added to horizontal text page cannot refresh and start scrolling from beginning, but instead of that if have to append horizontal text and continue to scroll showing appended message at the end.

Any advices, please?


Thanks,
Chris

I have a horizontal tabsystem given with this code:
Code:

                
<style>
  .tabContainer{ float:left;
			  width:795px;
			  margin: 1% 1%;
			  background-color:#0597ca;
		 	}
  .tabContainer .digiTabs { width:10%; float:left; }
  .tabContainer .digiTabs li{float:left;background-color:#0597ca;border:1px solid #e1e1e1;width:100%;padding:5px!important;cursor:pointer;border-bottom:none;margin-right:10px;font-family:verdana;font-size:.8em;font-weight:bold;color:#fff;}
  .tabContainer .digiTabs .selected{background-color:#5cc1dd;color:#FFF;}#tabContent{padding:10px;background-color:#5cc1dd;overflow:hidden;float:left;margin-bottom:10px;border:1px solid #e1e1e1;width:100%;}
  p{
	  padding:10px 10px 10px 10px;
	  margin: 0px 0px 10px 0px;

  }
</style>
<script type="text/javascript">
  function tabs(y)
  {
    var lis=document.getElementById("sidebarTabs").childNodes; //gets all the LI from the UL
 
    for(i=0;i<lis.length;i++)
    {
      lis[i].className=""; //removes the classname from all the LI
    }
    y.className="selected"; //the clicked tab gets the classname selected
    var res=document.getElementById("tabContent");  //the resource for the main tabContent
    var tab=y.id;
    switch(tab) //this switch case replaces the tabContent
    {
      case "tab1":
        res.innerHTML=document.getElementById("tab1Content").innerHTML;
        break;
 
      case "tab2":
        res.innerHTML=document.getElementById("tab2Content").innerHTML;
        break;
      case "tab3":
        res.innerHTML=document.getElementById("tab3Content").innerHTML;
        break;
	  case "tab4":
        res.innerHTML=document.getElementById("tab4Content").innerHTML;
        break;
      default:
        res.innerHTML=document.getElementById("tab1Content").innerHTML;
        break;
    }
  }
 
</script>
<div class="tabContainer" >
  <ul class="digiTabs" id="sidebarTabs">
    <li  id="tab1" class="selected"  onclick="tabs(this);">Shairzys</li>
    <li id="tab2" onclick="tabs(this);">Friends' Shairz
    </li>
    <li id="tab3"  onclick="tabs(this);">Blog</li>
     <li id="tab4"  onclick="tabs(this);">Info</li>
  </ul>
  <p><center>

Is there a way to make these tabs go verically instead? Like turn the text and all?

Hi,
I'm wanting to make a submenu appear on the page when a menu item is mouse-overed. I can find examples online where UL and LI are used, but that won't work in my layout:
http://www.girlscoutsmoheartland.org/newpagetest.php

Here, the menu items like "home" and "for girls" need to generate a horizontal submenu below where "menu item A" and "menu item B" are, and each submenu would appear in the same location as the other submenus, disappearing and appearing as a different menu item above is hovered over.

All I can find are like this:
http://htmldog.com/articles/suckerfish/dropdowns/
and I can't figure a way to conform that to this layout.

Can someone point me to a site that has a solution for this situation?
Thanks!
Liam

Hi Everyone,

I am unable to find a JavaScript picture viewer that does what I would like it to do.

I have created a wrapper div of specific size for the images to be displayed in. I want the thumbnail images to be horizontally at the top of the div and the "clicked" full-size image to appear within the same div, directly below the row of thumbnails. When a visitor opens the page the first image must be loaded automatically without having to click on the thumbnail.

Can anyone point me in a direction please?

Anita,
Cape Town.

Hi,

As an example, I have a horizontal navigation bar that grows and shrinks when the page is resized. I'd like it if the horizontal scroll bar only appeared when the window is less than x pixels wide (thus, cutting off some of my navigation options).

The same thing with zooming. If the user starts to zoom the page and the options of my nav bar begin to get cut off, is there any way to show the scroll bar after x number of zooms?

I'm just trying to avoid ALWAYS showing the horizontal or vertical scrolls. I'd like them to only appear as needed, like this site:

http://www.crimemapping.com/map.aspx...9-966e8cda4d70

(Notice if you zoom in, or change the window size, the behavior is like what I mentioned).

Is there any way to do this?

Hi

I'm looking for a simple ticker that scrolls horizontally across the top of the homepage of a site I'm working on. Ideally I would like one for both Twitter and RSS feeds, but either is good.

If anyone knows where I can find one that's simple to implement that would be great.

Kind Regards

I need the image to move horizontal instead of vertical. Here is the code.

Code:

        //##########################################################################//
	// Scrolling background Tutorial Code by http://www.kudoswebsolutions.com
        // Original Source code: http://youlove.us/
        // Modified and extended by Kudos Web Solutions
        // copyright 2009 kudoswebsolutions.com
        //##########################################################################//

$(function() {
	// Define the height of your two background images.
           //The image to scroll
	   var backgroundheight = 2000;
           //The image to overlay
	   var backgroundheight_two = 1000;
	// Create a random offset for both images' starting positions
        offset = Math.round(Math.floor(Math.random()* 2001));

 
	function scrollbackground() {
                //Ensure all bases are covered when defining the offset.
   		offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
		// Put the background onto the required div and animate vertically
   		$('#container3').css("background-position", "50% " + offset + "px");
   		// Enable the function to loop when it reaches the end of the image
   		setTimeout(function() {
			scrollbackground();
			}, 100
		);
   	}
	function scrollbackground2() {
                //Ensure all bases are covered when defining the offset.
   		offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
		// Put the background onto the required div and animate vertically
   		$('#container2').css("background-position", "50% " + offset + "px");
   		// Enable the function to loop when it reaches the end of the image
   		setTimeout(function() {
			scrollbackground2();
			}, 100
		);
   	}

	// Initiate the scroll
	scrollbackground();
	scrollbackground2();

	// Use the offset defined earlier and apply it to the div.
   		$('#overlay').css("background-position", "50% " + offset2 + "px");
   		$('#overlay2').css("background-position", "50% " + offset2 + "px");
});