JavaScript - Jquery Onclick Scrollto

Hello,

I posted this at another site, but am still at a loss so I hope I can get some help here

I am at a complete loss with this plugin. And if after reading my post, someone can come up with a better, less frustrating plugin, I would really appreciate it. The plug-in author's site is: http://flesler.blogspot.com/2007/10/jqueryscrollto.html. The gist of it is that I am making a website for a restaurant. They want the menu to horizontally scroll between the sections of food, and within each section, have a vertically scrollable (via scroll bar) text menu in two columns. When you click on the section in the nav menu, it's supposed to take you to that food section via horizontal animated scroll. The link below is the sample page I'm testing on, and an image is attached to show you the idea of what it's supposed to look like:

http://www.bqcreative.com/gcc2/menu.html

That is the sample page with the JQuery.ScrollTo plugin installed. When I shrink the page, it looks like the animation *is* working (by the window scroll bars moving), just not correctly, since it's not moving the divs.

Image of what each food section should look like:


Maybe this is a case of me not having the divs set up correctly with CSS? I'm not sure, I've dug myself into a messy hole... please help

HTML (with irrelevant code removed):
Code:

<div class="menunav">
   <ul>
    <li><a href="#" onclick="$.scrollTo('#appetizers', 1500, {easing:'elasout'}, {axis:'x'});">Appetizers</a></li>
    <li><a href="#" onclick="$.scrollTo('#skinnygreek', 1500, {easing:'elasout'}, {axis:'x'});">Skinny Greek</a></li>
    <li><a href="#">Salads</a></li>
    <li><a href="#">Sandwiches</a></li>
    <li><a href="#">Wraps & Pitas</a></li>
    <li><a href="#">Dinners</a></li>
    <li><a href="#">Desserts</a></li>
   </ul>
<br /><br /><br />
<hr />
  </div>
  <div class="menuwrap">
   <div id="appetizers">
    <div class="itemleft">
<p>Appetizer foods on the left</p>
    </div>
    <div class="itemright">
<p>Appetizer foods on the right</p>
    </div>
   </div>
   <div id="skinnygreek">
    <div class="itemleft">
<p>Skinny Greek foods on the left</p>
    </div>
    <div class="itemright">
<p>Skinny Greek foods on the right</p>
    </div>
   </div>
  </div>

CSS:
Code:

.menunav {
	width: 90%;
	margin-top:35px;
	margin-bottom:10px;
	margin-left:auto;
	margin-right:auto;
	}

.menunav ul {
	list-style:none;
	}

.menunav li {
	display:block;
	text-align:center;
	float:left;
	padding: 0 10px;
	}

.menunav li a {
	color: #2e6ab1;
	text-decoration: none;
	float:left;
	font-family: 'DominicanRegular', sans-serif;
	font-size:1.5em;
	}

.menuwrap {
	width: 721px;
	margin-top:10px;
	margin-bottom:10px;
	margin-left:auto;
	margin-right:auto;
	overflow-y:auto;
	overflow-x:hidden;
	position:relative;
	}

#appetizers {
	width: 721px;
	float:left;
	position:relative;
	top:0px;
	left:0px;
	}

#skinnygreek {
	width: 721px;
	clear:left;
	float:left;
	position:relative;
	top:0px;
	left:800px;
	}

.itemleft {
	width:50%;
	float:left;
	}

.itemright {
	width:50%;
	float:right;
	}

Javascript (in header section):
Code:

<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>
<script type="text/javascript">
<!--
jQuery(function( $ ){
		//borrowed from jQuery easing plugin
		//http://gsgd.co.uk/sandbox/jquery.easing.php
		$.scrollTo.defaults.axis = 'xy'; 
		$.easing.elasout = function(x, t, b, c, d) {
			var s=1.70158;var p=0;var a=c;
			if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
			if (a < Math.abs(c)) { a=c; var s=p/4; }
			else var s = p/(2*Math.PI) * Math.asin (c/a);
			return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
		};
		});
// -->
</script>

I have a menu on my site that is not working in IE. It works fine in Safari and Firefox, but it doesnt even open the link for the correspoding button. It just stays on the home page. Someone told me it was the google analytics, but I changed the menu portion of the code and added the gaq_push and the trackEvent, but it's still not working. Help guys, thanks.

Hi,

I'm having a problem with my page not resetting to the point where the user clicked on an element. I believe this to be a javascript problem, however, if it is not I would be glad to move it to the proper forum.

What I have is a page with a div that contains a large image (a map). the dims are 1237 x 1550. I am using a browser window resized to approx. 800 x 600 so that I can simulate a smaller screen viewport. The page has links that are scattered about the map (positioned with css) and what I want to do is launch a video using the HTML5 video tag when the user clicks on a link. The video is supposed to open in the center of the users viewport and then dim the map div, which it does, however the page resets its position after the js function and aligns the page back to the upper left corner of the browser window. If the user had scrolled (both x and y) to the max of the scroll bar, then this will be fairly frustrating to have to keep moving back, thus my dilemma.

I tried using scrollto to reset the scroll back to where the user was, but this is not working. What's funny is if I put an alert at the very end of the function, the page displays properly (video is centered on the screen where the user was in their viewport) but resets as soon as the alert is closed. I then tried using location.reload(false), but this keeps the function from running properly (the page shows properly for a fraction of a second then resets back to a newly launched page).

Below is the code. Also, this has only been tested with FF and Chrome on my local drive. It is not anywhere on the web right now. In chrome, the page resets to the top only. I'm really not interested in making this work with IE since this is for personal/family use. Your help is greatly appreciated.

Code:

CSS
	body {
		background: black;
		text-align: center;
		vertical-align: middle;
	}	
	div#bkg {
		position: absolute;
		text-align: center;
		z-index: 1;
	}
        p#day1 {
		position: absolute;
		top: 800px;
		left: 1000px;
		font-weight: bold;
		width: 50px;
		background: white;
	}

Javascript
function showVid(srcVid) {
// set the proper filename of the vid
	srcVid = srcVid + ".ogv";
// create the video tag
	var vidWin = document.createElement("video");
	vidWin.id = "movie";
	vidWin.setAttribute("width", "320");
	vidWin.setAttribute("height", "240");
	vidWin.setAttribute("controls", "controls");
// pic size is 1237 x 1550
	var vpw = window.innerWidth;
	var vph = window.innerHeight;
	var xPosOff = window.pageXOffset;
	var yPosOff = window.pageYOffset;
	var leftNum = ((vpw/2) + xPosOff) - 160;
	var topNum = ((vph/2) + yPosOff) - 120;
	vidWin.setAttribute("style", "position: absolute; left: " + leftNum + "px; top: " + topNum + "px; z-index: 255;");
// create the source tag
	var vidSrc = document.createElement("source");
	vidSrc.src = "videos/" + srcVid;
	vidSrc.type = "video/ogg";
	vidSrc.codecs = "theora, vorbis";
	vidWin.appendChild(vidSrc);
	document.getElementById('bkg').style.opacity = 0.5;
	document.body.appendChild(vidWin);
	window.scrollTo(xPosOff, yPosOff);
// tried this, it didn't work
//	location.reload(false);
}

HTML
<body>
<div id='bkg'>
<img src="images/pic1.jpg" />
<p id="day1"><a href="#" onclick="showVid('oggtest')">Day 1</a></p>
</div>
</body>

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, i have a jquery problem...

this script is not working with jquery-1.4.2.min, but it works with jquery-1.2.6.min.js, can anyone help me???the script is the above:
(it is not working the tab actions, the slideout works...)
http://www.benjaminsterling.com/wp-c...es/sidetab.htm

the javascript code is the above:
PHP Code:
var jqsideTabs;
var tabs, h = 50, r = 0,ra = 0;
$(document)
.ready(function(){
    jqsideTabs = $('#sideTabs').addClass('closed');
    
    tabs = jqsideTabs
    .find('.tab h3')
    .clone()
    .appendTo(jqsideTabs)
    .each(function(i){
        var that = $(this), cls = '',ow,newThis, newEl;
        
        if( i == 0 ) cls = ' active';
        newEl = $('<a href="#" class="tabLinks'+cls+'">' + that.text() + '</a>');
        that.replaceWith(newEl);
        
        ow = newEl.outerWidth();
        
        if( i == 0 ) ra = ow;
        else r = ow;
        
        h = newEl.css({'top':h , 'right': -ow }).height() + h;
        
        newThis = newEl.get(0);
        newThis.jq = newEl;
        newThis.i = i;
        
        newEl.click(function(){
            var el = this.jq;
            
            if( jqsideTabs.hasClass( 'closed' ) ){
                jqsideTabs.removeClass('closed');
            }
            else if( !jqsideTabs.hasClass( 'closed' ) && el.hasClass('active') ){
                jqsideTabs.addClass('closed');
            }
            
            el
            .siblings()
                .removeClass('active')
                .css({'right': -r })
            .end()
            .addClass('active')
            .css({'right': -ra });
            
            tabs.eq( this.i ).show().siblings('.tab').hide();
            
            return false;
        });
    })
    .end()
    .parent()
        .eq(0)
        .addClass('active')
    .end()
        .filter(':not(:eq(0))')
        .hide()
    .end();
    
    jqsideTabs.bind("mouseleave",function(){
        jqsideTabs
        .animate({left:-310}, 'fast', function(){
            jqsideTabs.addClass('closed').removeAttr('style');
        });
    });
}); 


and the html file is:
[HTML]
<div id="sideTabs">

<div class="tab">
<h3>Tab 1</h3>
<div class="gut">
<p>Some text</p>
</div>
</div>
<div class="tab">
<h3>Tab 2</h3>

<div class="gut">
<ul>
<li>link</li>
</ul>
</div>
</div>
<div class="tab">
<h3>Tab 3</h3>

<div class="gut">
<ul>
<li>link</li>
</ul>
</div>
</div>
</div>
[/HTML]
the problem is that the tab button works, but the content doesnt change...in all of tabs showing the same text(showing all tbas content)....

can anyone help...please.....

I'm currently working on a project and I am doing a bunch of image switching.

I'm having a problem with the following...

I have seven medium image objects and one small one. One is at the top and the other 7 are below. When one of the 7 is clicked, it then becomes the one up top and the one up top then takes the place of the image clicked. This needs to be able to happen no matter which of the seven i click.

Also when you click one of the seven it runs a script to change 9 other images in the center of the page. this isnt too important because i have it working already.

What i have is, each of the seven images run their function that changes the 9 center images and then it runs another function.

What i need is for that function to determine which company for example(shaws, lowes, target) the top image belongs to and replace the image that was clicked with the top one. But i also need to replace the NAME="" and ONCLICK="function()" with the proper ones for the original company up top.

Please if you can understand what im trying to do let me know, if you need further clarification i can do so. i can draw a picture of what im trying to do or the layout if needed but i cant necessarily show anyone the project due to a non-disclosure.

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

var s="attr"
var i=$(s)
// jQuery(elem).attr(attr,eval("elm"+attr));
jQuery(elem).$(s)(attr,eval("elm"+attr));//i tried this.

how to assign a variable name in the above code(in place of s) so that i need to add an attribute to the element "elem".

Is it possible disable an onclick after clicking it and then enable it from another onclick by id

Code:

<img id="one" href="images/homepage/sliders/bonus_button.jpg" style="position:relative; top:30px; left:50px; height:30px; width:70px; float:left;">

This code runs when it is clicked:

Code:

$("#one").click(function() {
			
				runEffectB();
			
			
			
			return false;
		});

What I would like to happen is for either runEffectB() to not run if it was just run or to disable the #one.click once it has run.
I am assuming I will be able to re-enable it from another onclick running a similar function.
This is jquery and jquery ui if that helps.
Any ideas much appreciated.

Ok, I would post my entire data here but then yall would be reading insane amounts of script. I've got a div content jquery slider on my site I am making and it works beautifully in all browsers(took me a while). Then, I decided why not have it where when people click on a "read more" link that it pops up a box, instead of directing to the new page, and displays the contents of a div. It would not work at all. My question is there a possible way to do this?

Hey guys,

OK, so I have two buttons (code below) that when a user clicks on it, it will place text in a textarea. You can view all the code below:

Buttons:
Code:

<div id="newButton">
                  <a href="#"><img src="http://i49.servimg.com/u/f49/17/29/94/19/graphi10.png" alt="Request a Graphic"></a>
                  <a href="#"><img src="http://i49.servimg.com/u/f49/17/29/94/19/review11.png" alt="Request a Review"</a>
</div>

The textarea ID is:
Code:

text_editor_textarea

and this is the code that I would like to be placed inside the textarea:
Code:

 Nature of Request: 
 Creation Size: 
 Primary Colors: 
 Text To Insert: 
 Donation: 
 Extra Information: 
 URL: 

I tried this, but the BBCode would not keep it's structure and would all end up on one line.

EDIT: Oh...The BBCode is parsing inside the code box >.<

hi everybody..


i have this simple code:

Quote:
<html>
<head>
<script language="javascript" type="text/javascript">
document.write("<input type='button' value='push' onclick='hi()'/>");
function hi() {
alert("hi");
document.write("<input type='button' value='enter' onclick='javascript: bye()'/>");




}
function bye() {
alert("bye");


}
</script>
</head>


<body>




</body>
</html>


if i try to run it on chrom its works well..

but on IE or FireFox its not define the bye() function..

whats the reason?! and how i can solve it?..

thanks very much..

Hello...

Here is an example of a site I'm working on:

http://mrmatthewreese.com/surine/custominlays.php

notice the links for the alien cross bones, celtic knot etc...change colors once they are clicked on? Is it possible to have the top (alien crossbone) be set to black before it is clicked on then changed to the grey color once a different link is clicked?

Just curious if anyone can help.


Here is the javascript code:

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
var Lst;

function CngClass(obj){
if (Lst) Lst.className='';
obj.className='boldlink';
Lst=obj;
}

/*]]>*/


</script>

<a href="#" onclick='changeimage();'><span onclick="CngClass(this);">Alien Crossbones</span></a><br />
<a href="#" onclick='changeimage2()'><span onclick="CngClass(this);">Celtic Knot</span></a><br />
<a href="#" onclick='changeimage3()'><span onclick="CngClass(this);">Compass Rose</span></a><br />
<a href="#" onclick='changeimage4()'><span onclick="CngClass(this);">Fleurdelis</span></a><br />
<a href="#" onclick='changeimage5()'><span onclick="CngClass(this);">Geometrix</span></a><br />
<a href="#" onclick='changeimage6()'><span onclick="CngClass(this);">Modern Vine</span></a><br />
<a href="#" onclick='changeimage7()'><span onclick="CngClass(this);">Nouveau</span></a><br />
<a href="#" onclick='changeimage8()'><span onclick="CngClass(this);">Scorpion</span></a><br />
<a href="#" onclick='changeimage9()'><span onclick="CngClass(this);">Traditional Block</span></a><br />
<a href="#" onclick='changeimage10()'><span onclick="CngClass(this);">TrebleBass Clef</span></a>

Hi i have a page that allows the user to enter details and also upload an image , I have onclick event on a submit button that goes off and performs a geocode on the postcode and saves the lat long to a database along with the other details they enter ( which all works fine) .

The problem is that when i use the onclick event with the submit button it seems to bypass the onclick JS function and just go straight to the image upload bit. Can a button be a submit button and also have an onclick event or is there anything else i can do to fix the problem?