JavaScript - A Nice Jquery Content Slide, Any Ideas?

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?

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.

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!!!

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?

Hello,

I am creating a little script that allows me to scroll my content sections in and out though Ajax and CSS. I have have successfully made it slide in from the top but I have one problem, sliding out! I wrote a clip for 'aniOut' that works also but I cant seem to make one load before the other in transition. I am not very good with javas cript anyone have any suggestions? So far this only is working for Chrome. My site is live with the working slide in at The Mind Company. Also I am having a load issue with some browsers and computers where the page must be refreshed in order to view proper, any suggestions?

CSS:
Code:

header {
  z-index:100;
  position:relative;
  display: block;
  background-color: #272727;
  height:100px;}

#contentBody {
  min-height:48em;}

footer {
  position:relative;
  display: block;
  background-color: #272727;
  height:168px;  }

#aboutPage { 
  display:none;}

#productPage { 
  display:none;}

#contactPage { 
  display:none;}

.aniIn {
z-index:0;
-webkit-animation-name: ANIMATEin;
-webkit-animation-duration: 0.25s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
}

@-webkit-keyframes ANIMATEin {
from {
margin-top:-4000px;
}
to {
margin-top:0px;
}
}

.aniOut {
-webkit-animation-name: ANIMATEout;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
}
@-webkit-keyframes ANIMATEout {
from {
margin-top:0px;
}
to {
margin-top:3000px;
}
}

Script:
Code:

function $_(IDS) { return document.getElementById(IDS); }

function ani(){
	document.getElementById(classID).className ='aniOut';
}

function checkPage(classID, url){	
	var tmp = '';
	var sel = document.getElementsByTagName('section');
	for (var i=0; i<sel.length; i++){
		if (sel[i].id == classID) { tmp = 'block' } else { tmp = 'none' }
		$_(classID).className ='aniIn';
		sel[i].style.display = tmp;}
	$_(classID).style.display = 'block';	 
	loadContent(classID, url);  }
  
function loadContent (classID, url){
	var xmlhttp;
	if (window.XMLHttpRequest){
		xmlhttp=new XMLHttpRequest();}
	
	xmlhttp.onreadystatechange=function(){
		if (xmlhttp.readyState==4 && xmlhttp.status==200){
			document.getElementById(classID).innerHTML=xmlhttp.responseText;}}
		
	xmlhttp.open("GET","content/"+url,true);
	xmlhttp.send();}

HTML:
Code:

<!-- Header Areas: (Constent visual)--> 
<header>
	    <li><a href="#" onclick="checkPage('aboutPage', 'about.html');return false">About</a></li>
	    <li><a href="#" onclick="checkPage('productPage', 'projects.html');return false">Projects</a></li>
	    <li><a href="#" onclick="checkPage('contactPage', 'contact.html');return false">Contact</a></li>
</header>

<!-- Content Areas: (Variable visual)-->
<div id="contentBody">
    <section id="aboutPage"></section>
    <section id="productPage"></section>
    <section id="contactPage"></section>
</div>

<!-- Footer Area: (Constant visual)-->
<footer></footer>

Hello,

I am creating a little script that allows me to scroll my content sections in and out though Ajax and CSS. I have have successfully made it slide in from the top but I have one problem, sliding out! I wrote a clip for 'aniOut' that works also but I cant seem to make one load before the other in transition. I am not very good with javas cript anyone have any suggestions? My site is live with the working slide in at The Mind Company. Also I am having a load issue with some browsers and computers where the page must be refreshed in order to view proper, any suggestions?

CSS:
Code:

header {
  z-index:100;
  position:relative;
  display: block;
  background-color: #272727;
  height:100px;}

#contentBody {
  min-height:48em;}

footer {
  position:relative;
  display: block;
  background-color: #272727;
  height:168px;  }

#aboutPage { 
  display:none;}

#productPage { 
  display:none;}

#contactPage { 
  display:none;}

.aniIn {
z-index:0;
-webkit-animation-name: ANIMATEin;
-webkit-animation-duration: 0.25s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
}

@-webkit-keyframes ANIMATEin {
from {
margin-top:-4000px;
}
to {
margin-top:0px;
}
}

.aniOut {
-webkit-animation-name: ANIMATEout;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
}
@-webkit-keyframes ANIMATEout {
from {
margin-top:0px;
}
to {
margin-top:3000px;
}
}

Script:
Code:

function $_(IDS) { return document.getElementById(IDS); }

function ani(){
	document.getElementById(classID).className ='aniOut';
}

function checkPage(classID, url){	
	var tmp = '';
	var sel = document.getElementsByTagName('section');
	for (var i=0; i<sel.length; i++){
		if (sel[i].id == classID) { tmp = 'block' } else { tmp = 'none' }
		$_(classID).className ='aniIn';
		sel[i].style.display = tmp;}
	$_(classID).style.display = 'block';	 
	loadContent(classID, url);  }
  
function loadContent (classID, url){
	var xmlhttp;
	if (window.XMLHttpRequest){
		xmlhttp=new XMLHttpRequest();}
	
	xmlhttp.onreadystatechange=function(){
		if (xmlhttp.readyState==4 && xmlhttp.status==200){
			document.getElementById(classID).innerHTML=xmlhttp.responseText;}}
		
	xmlhttp.open("GET","content/"+url,true);
	xmlhttp.send();}

HTML:
Code:

<!-- Header Areas: (Constent visual)--> 
<header>
	    <li><a href="#" onclick="checkPage('aboutPage', 'about.html');return false">About</a></li>
	    <li><a href="#" onclick="checkPage('productPage', 'projects.html');return false">Projects</a></li>
	    <li><a href="#" onclick="checkPage('contactPage', 'contact.html');return false">Contact</a></li>
</header>

<!-- Content Areas: (Variable visual)-->
<div id="contentBody">
    <section id="aboutPage"></section>
    <section id="productPage"></section>
    <section id="contactPage"></section>
</div>

<!-- Footer Area: (Constant visual)-->
<footer></footer>

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

Hello Guru's,


I hope someone can help me with the following.

I have a div on a page, with content (images, text), I want to rescale it by using a slider.
I have this code sample which allows to rescale, rotate, skew, but I only want to use the rescale option, and use it with a slider instead of using the small magnifying glass icon on the right bottom corner.

I've have add the files as attachment and hope someone can help me with this.

Thanks.

I moved this to a more appropriate place...

http://www.codingforums.com/showthread.php?t=184432

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

This is a different issue to the scrollbar one I put in the xhtml section not long ago, I'm not spamming

Here's my website so far: http://designprohibited.com/dp3/

If you click the "view showreel" tab at the top a div will slide out and display a test video hosted at Vimeo.com.

If you do that in IE it slides out very smooth and nicely. If you do it in FireFox a white box where the video is loads instantly before the div slides out and it looks a bit crappy.

Any fixes?

hey when i open a popup window by javascript it is an usual window though some customizable like whether displaying menubar, displayed position and some other options. but i want to createpopup windows like facebook popup windows which is nice,thin and immovable.

please give me an example (code) to create a nice popup window or any other help regarding this.

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.....

Does anyone have any ideas for what i should work on next. I've made a music player where you can select the song you want. I've made a calculator. I'm relatively new to javascript so.