JavaScript - Jquery Page Slide And Direct Links

Hello, i would like to advise me on sthg.

I have built a website using a)MySQL b)HTML c)PHP and d)Javascript.

My website consists of basic html pages/templates which have links to the left and point to another templates/pages.
For example, i have 4 templates in my site
1st template is for: News
2nd : Library
3nd : Articles
4th : E-shop

Each template consists of 1. a small menu with links,every link points to another page 2.space for the content/text of the html page 3. a form for searching in the website using php and a mysql database.

Well, i'm thinking of adding some animation in my website using the jquery library.Let's say we have an accordion which has 4 choices and when the user clicks on the first choice the 1st template(NEWS) appears inside the slide of accordion,loads in the same slide, not in a new page!!!This is what i would like to do, place in each slide of the accordion one of my templates. CAn this be done???
Which are the disadvantages of adding in each slide of the accordion a different template for my site and remain in the same slide when the user clicks in one of the links of the template???
Consider that i'm using dynamic content and not static, i have a MySQL database behind.

Also,as i have seen in most examples the options of accordion usually contain an image, a content, a text or links which open in a new window or tab not inside the slide!!!These links do not load in the same slide!!i would like to have a template which loads in the slide each time the user clicks on a link of it.

CAn this be done??

I would be glad if sm could advise me!
Thanks, in advance!!!

I have found a jQuery slide show at http://tobia.github.com/CrossSlide/ which interests me because of its smooth, cross-browser fade transitions. I would like to add a feature which automatically resizes the images proportionally, to fit the browser window. This feature is demonstrated in the Supersized slide show at www.mauitradewinds.com, but I am not satisfied with the quality of fade transition with Supersized -- especially under Safari. I would appreciate any guidance as to how to implement auto-resizing with the Cross-slide plug-in. Additionally, it would help if Cross-slide launched the slide show without waiting for all images to load.

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);
}

On my site's shopping cart, when clicking the "buy" button, it merely animates a little item that shows that something is now in the customer's cart. I'd like it to do this, and then redirect to "/cart", cutting down the work of what the user actually has to do (we only have one product).

Here's what I'm working with:

<!-- START ADD TO CART -->
{% if featuredproduct.available %}
<span class="featured-product price"><span>{{ featuredproduct.price | money }}</span>{% if featuredproduct.compare_at_price_max > featuredproduct.price %} <del>{{ featuredproduct.compare_at_price | money }}</del>{% endif %}</span>

<input type="submit" value="{{ settings.text_addtocart }}" class=" add-to-cart addtocart button primary">

{% else %}
<h3 class="featured-product price sold-out"><span>Sold Out</span></h3>
<input type="submit" value="{{ settings.text_addtocart }}" class="featured-product add-to-cart button primary disabled" disabled="disabled ">
{% endif %}
<!-- END ADD TO CART -->

Adding an "onclick="location.href='/cart';" after the input classes does not fire the actual act of adding the item to the cart, so it shows an empty cart on the redirect.

JS newbie, sorry for the rough explanation. Any help greatly appreciated!

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

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.

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 wish to get some content from another page.
Here is my code.
Code:

<script type="text/javascript">
jQuery.ajax({url: 'http://www.livecounter.dk/viewstats/30050',type: 'get',success: function(ajax) {
var x = jQuery('#box4 .first:last', ajax).innerHTML;
document.write(x);
}
}
});
</script>

<script src="http://code.jquery.com/jquery-1.6.1.min.js"> </script>

But it isn't working. I can't get the at this page : http://www.livecounter.dk/viewstats/30050 under "Altid" (to the right), next to "Sidevisninger". Image of it here : http://i51.tinypic.com/2e0sb9s.png

Thanks

Hi everyone,

I searched and found some answers to this question, however, after trying the solutions, none worked for me. I am hoping someone can help me figure out where i'm going wrong with this.

I am trying to use the jQuery Nivo Slider and the jQuery Ad Gallery on the same page. When both scripts are active, only one works. When i comment out one of them, the other works. This happens either way i do it. I tried using the jQuery.noConflict(); but it did not work...unless i did something wrong.

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/includes/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript" src="/includes/jquery.ad-gallery.js"></script>
<script type="text/javascript">
    $(function() {
    $('img.image1').data('ad-desc', 'Whoa! This description is set through elm.data("ad-desc") instead of using the longdesc attribute.<br>And it contains <strong>H</strong>ow <strong>T</strong>o <strong>M</strong>eet <strong>L</strong>adies... <em>What?</em> That aint what HTML stands for? Man...');
    $('img.image1').data('ad-title', 'Title through $.data');
    $('img.image4').data('ad-desc', 'This image is wider than the wrapper, so it has been scaled down');
    $('img.image5').data('ad-desc', 'This image is higher than the wrapper, so it has been scaled down');
    var galleries = $('.ad-gallery').adGallery();
    $('#switch-effect').change(
      function() {
        galleries[0].settings.effect = $(this).val();
        return false;
      }
    );
    $('#toggle-slideshow').click(
      function() {
        galleries[0].slideshow.toggle();
        return false;
      }
    );
    $('#toggle-description').click(
      function() {
        if(!galleries[0].settings.description_wrapper) {
          galleries[0].settings.description_wrapper = $('#descriptions');
        } else {
          galleries[0].settings.description_wrapper = false;
        }
        return false;
      }
    );
  });

jQuery.noConflict();
jQuery(window).load(function() {
jQuery('#slider').nivoSlider({
    effect:'fade', // Specify sets like: 'fold,fade,sliceDown'
    animSpeed:5, // Slide transition speed
    pauseTime:7000, // How long each slide will show
    startSlide:0, // Set starting Slide (0 index)
    directionNav:false, // Next & Prev navigation
    directionNavHide:true, // Only show on hover
    controlNav:true, // 1,2,3... navigation
    controlNavThumbs:false, // Use thumbnails for Control Nav
    controlNavThumbsFromRel:false, // Use image rel for thumbs
    controlNavThumbsSearch: '.png', // Replace this with...
    controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
    keyboardNav:true, // Use left & right arrows
    pauseOnHover:true, // Stop animation while hovering
    manualAdvance:false, // Force manual transitions
    captionOpacity:0.8, // Universal caption opacity
    prevText: 'Prev', // Prev directionNav text
    nextText: 'Next', // Next directionNav text
    beforeChange: function(){}, // Triggers before a slide transition
    afterChange: function(){}, // Triggers after a slide transition
    slideshowEnd: function(){}, // Triggers after all slides have been shown
    lastSlide: function(){}, // Triggers when last slide is shown
    afterLoad: function(){} // Triggers when slider has loaded
    });
});
</script>

Does anyone have any ideas?

I appreciate the help in advance!

Tsiqueira

Hello all, I would like someone to help me with this. I'm building my portfolio website. I'm an illustrator and graphic designer (for printing). My website uses html and css. I introduce a jquery plugin to create a slide show with my work. Until then, everything was working well. The problem appears when I introduce php to my code in order not to repeat the navigation bar all the time. With php and the jquery together I get a blank page in my browser.

This link shows the blank page I'm getting using php and jquery together.
http://www.raulmv.com/calendar.php

This is an example of the site without the jquery.
http://www.raulmv.com/graphics.php

Could someone please help me with this thanks.



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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="#" />
<meta name="keywords" content="#" />

<title>#</title>

<meta name="google-site-verification" content="1ksaaEb5-Ur8h5ivruWp4iRcUB-tDLyM43L6yCl1OuQ" />

<link href="css/style.css" rel="stylesheet" type="text/css" />

<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/js/jquery.cycle.all.js"></script>
<script type="text/javascript" src="/js/common.js"></script>


<!--Google Analytics-->

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-12002561-1']);
  _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>




</head>

<body class="#" id="portfolio">

<div id="container">

<!--Top Navigation-->  
<div id="navcontainer"> <?php {include("navbartop.html");} ?> </div>

  
 
<!--Left Navigation-->  
<div id="navBar"> <?php include("navbarleft.html"); ?> </div>


<!--Info-->
<div id="info">
       <span class="Title">ANYTIME CALENDAR | 2009</span>
          <span class="style">Calendar designed to be used any year, any occasion, anytime.</span>    
</div>  





<!--Imagenes-->
<div id="showreel-nav-wrap">
  <span>
    </span>
</div>



<ul id="buy-links" class="slideshow">
  <li>
  </li>
  
  <li>
  </li>
  
  <li>
  </li>
  
  <li>
  </li>
  
  <li>
  </li>
  
  <li>
  </li>
  
  <li>
  </li>
</ul>
        

<div id="showreel">
                <ul class="slideshow pics">    
                    <?xml version="1.0" encoding="utf-8"?>

<li><img src="images/Calendar.png" height="522px"/>
</li>

<li><img src="images/IMG_1162.png" height="522px" />
</li>

<li><img src="images/IMG_1307.png" />
</li> 

<li><a href="images/Calendar/Instructions.gif"><img src="images/Instructions_small.gif" /></a>
</li>        
      </ul>  
			</div><!--/showreel-->




<script type="text/javascript">
$(function() {	
	var totalImg = $("#showreel li").size() - 1;
	$("#buy-links li:gt(" + totalImg + ")").remove();
	
    $("#showreel-nav-wrap span").after('<div id="showreel-nav" class="showreel-nav">')

	$('.slideshow').each(function(index) {
        $(this).cycle({
			fx:     'fade',
			speed:  'slow',
			timeout: 0,
			sync:    false,
			pager:  '#showreel-nav',
			pagerAnchorBuilder: function(i) {
				if (index == 0)
					// for first slideshow, return a new anchor
					return '<a href="#">'+(i+1)+'</a>';
				// for 2nd slideshow, select the anchor created previously
				return '#showreel-nav a:eq('+i+')';
        	}
		});
    });

	//Image to trigger showreel links
	activeLink = $('#showreel-nav').find('.activeSlide');
	nextLink = activeLink.next();

	$('.slideshow img').bind('click',function(){
		activeLink = $('#showreel-nav').find('.activeSlide');
		nextLink = activeLink.next();
		nextLink.trigger('click');
	});
	
	//Get h1 text length
	var h1length = $('h1').text().length;
	if(h1length > 27) {
		$('.oj-title').css('margin-top','-21px');
	}
});
</script>

<!-- end #mainContent --></div>


</body>
</html>

Those <li> tags Im using is to numbered the images. It might not be a good practice but it works.

Thanks for reading this post, I hope someone could help me. It's frustrating I have been for the last two days going around trying to change things and nothing seems to work.

Hi guys, I want to make a website and instead of having individual pages for each page, I would like it all to be on one page. I want to use jQuery to switch between the different tabs but I also need it to be able to stay on that certain tab when the page is reloaded. I also need to be able to link to the certain tabs which I think would be accomplished by using ID tags. If anyone can help, that would be great.

Hello!
I am developing my personal website!
And I am trying to implement it with JS completely. which means I need the page to be one front end page.
But the back-end pages would be the ones which do the work and calculations!
In other words and more explaination:
I would like to have one "index.php" page that contains only a nav bar which handles the mission.
Once the page load it loads with the content of "home.php" (the landing page) if the "contact" tab is clicked then I would like to load the "ContactMe.php" page content.
I have done this already! but the problem is:
"home.php" uses alot of javascript functions and jquery plug-ins. when I load it, it looks messy that you think the JS is disabled in your machine :-\
Note: the loading has been done with those methods: .load(), $.ajax! -> same results!

The conclusion:
* "home.php"
* "ContactMe.php"
* "About.php"
Is it possible to load those pages in the "index.php" and still have their JS functions function correctly and display as if they were accessed individually?

The goal that I am trying to achieve is that I make my whole website for the visitor as "One Page Site"! I am challenging myself with it though!

Thank you in advance for your informative posts!


Please Note that I have only put the <html><head><body> tags in the index.php and removed them from the back-end pages such as home.php, contactme.php and about.php! for that sake that it works correctly! but with no hope!

Hi I'm trying to load a part of a page (that has script in it) into another page using jquery. However, though the html loads in correctly, none of the script is working.

I'm using code from http://css-tricks.com/video-screenca...namic-content/
ie. the pages all work without java (static pages) and when java is enabled, instead of going to bio.html you get taken to ..#bio.html.

However if I've got any script I would like to be loaded .. ie. lightbox gallery or even a simple jav split and put back together email address hider.

Any help greatly appreciated. I'm not very clued up about jquery at the moment unfortunately and though I've been trying to read and learn, alot is going over my head..


Not sure how best it is to show you the page as it's not live yet. Maybe if it helps I can upload a zip of the site. It's a simple 6 page musician site.
Though my code is exactly like the css-tricks page, just that I have a lightbox on one page (which loads fine if there's no hash in the address - but when hash is there, it shows thumbnails, and when you click one, it just takes you to the larger .jpg destination page (no lightboxness etc).)

Thanks

I have a problem where the page doesn't expand when more results get loaded via jquery on a facebook style wall. Once more results get loaded the footer stays static instead of moving down.

What's the best way to do this?

Im trying to run javascript on a page, that has a regular frame, and get all the links from the frame. However im not very good at javascript which makes this much harder


This is the script im trying to use:
Code:

javascript: for(var i=0; i<window.frames.length; i++){for (i=0; i < document.links.length; i++)  {    alert(document.links[i].href);    }};