|
JavaScript - Css Transition Of Content. Slide Out Suggestion?
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>
Similar TutorialsHello, 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>
I've seen this really nice slider on www.formfiftyfive.com (when you click the links at the top i.e about, it will drop down revealing content) It moves the entire site rather than just overlay. I really like this and would love to implement it into my site? Any ideas what it is and how I can use it? 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;
}
Hello all.. I am relatively new to javascript. I am using a javascript code for a slideshow inside a photo gallery. With the current code there is some degree of overlap between consecutive images so that the images merge for a second. I want a traditional slideshow where one image stays for 3 seconds, fade out without any steps, and next image entering without any delay. Dont want any merging. Which function should I change for that? Is it parameters in set interval? Good day, This program is supposed to have a "box" cover the entire screen and then collapse upon opening the page... I cannot find what is wrong, other than the obvious error that there is no object or it is null, but this is the example the book gave... Anyone care to give me a point in the right direction Thanks, in advance. ao5431 <code> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Boxed In</title> <link rel="stylesheet" href="js_styles.css" type="text/css" /> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript"> /* <![CDATA[ */ var clipSpeed = 5; var clipRight = 0; var clipLeft = 0; var clipTop = 0; var boxSize; var stopShrinking; var clipBottom = 0; var clipBox; var clipBox = document.getElementById("box").style; function startShrinking() { if(navigator.appName == "Microsoft Internet Explorer") { boxSize = document.documentElement.clientWidth / document.documentElement.clientHeight; clipRight = document.documentElement.clientWidth; clipBox.width = clipRight + "px"; clipBottom = document.documentElement.clientHeight; clipBox.height=clipBottom + "px"; } else { boxToShrink = window.innerWidth/window.innerHeigth; clipRight = window.innerWidth; clipBox.width = clipRight + "px"; clipBottom = window.innerHeight; clipBox.height = clipBottom + "px" } stopShrinkingInterval("shrinkBox()", 100); } function shrinkBox() { if(navigator.appName == "Microsoft Internet Explorer") minBoxSize=document.documentElement.clientWidth/2; else minBoxSize = window.innerWidth/2; if (clipLeft > minBoxSize) { clearInterval(stopShrinking); clipBox.display = "none"; } clipBox.clip = "rect(" + clipTop + "px" + clipRight + "px" + clipBottom + "px" + clipLeft + "px)" clipLeft += boxSize * clipSpeed; clipTop += clipSpeed; clipRight -= boxSize * clipSpeed; clipBottom -= clipSpeed; } /* ]]> */ </script> </head> <body onload="startShrinking()" > <div id="box" style="position:absolute; background-color:blue"></div> </body> </html> </code> Hi All I'm using the fantastic turtorial here for my site navigation: http://css-tricks.com/6336-dynamic-p...acing-content/ It's all working wonderfully but I've hit a major stubmling block. After the new page is loaded it won't load an scripts. E.g. I'm using scripts for expanding divs, galleries, contact forms etc and they simply don't run after the page transition Let me know if you need a link to my project I'm aware the page isn't actually 'refreshed' so I'm asuming they wont fire the standard way by having the script tags in the header (Please correct me if I'm wrong) So my question is how can I get them working once the new page is loaded? Script below: Code: $(function() {
var newHash = "",
$mainContent = $("#right"),
$pageWrap = $("#wrap"),
baseHeight = 0,
$el;
$pageWrap.height($pageWrap.height());
baseHeight = $pageWrap.height() - $pageWrap.height();
$("nav").delegate("a", "click", function() {
window.location.hash = $(this).attr("href");
return false;
});
$(window).bind('hashchange', function(){
newHash = window.location.hash.substring(1);
if (newHash) {
$mainContent
.find("#guts")
.fadeOut(200, function() {
$mainContent.hide().load(newHash + " #guts", function() {
$mainContent.fadeIn(200, function() {
$pageWrap.animate({
height: baseHeight + $mainContent.height() + "px"
});
});
$("nav a").removeClass("current");
$("nav a[href="+newHash+"]").addClass("current");
});
});
};
});
$(window).trigger('hashchange');
});
All help is appreciated Thanks in advance Craig Hey all- I've gotten accustomed to using coda slider 2.0 to do some cool interactive sliding elements on my pages. However, i need something similar that will fade instead of slide. I've searched all over their home forums and it seems like no one there has an answer for how to implement the change in the current codaslider infrastructure. (http://www.ndoherty.biz/demos/coda-slider/2.0/) I need something that has all the functionality of coda slider (easy transitions, div's containing lots of content- both images and text, forward/back buttons, autoplay) but with a fade transitions any ideas? Hello good coders! Thanks to the wonderful script provided by coothead he http://www.codingforums.com/showthread.php?t=87036 I was wondering how I could adjust the transition/fade speed between the images in the script? I tried a couple of different ways, but I couldn't get it working. Does anyone know how I can adjust this in a cross-browser compatible way? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>multiple image maps</title>
<base href="http://coothead.homestead.com/files/"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
#mapImage_holder {
text-align:center;
}
#mapImage {
border:1px solid #000;
}
/*//]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
var maps=new Array();
maps[0]='dots.gif,#dots';
maps[1]='map.jpg,#blood';
maps[2]='apple0.jpg,#apples';
var c=0;
var speed=1000*10; //set for 10 secs, change to suit needs.
function swapMap() {
obj=document.getElementById('mapImage');
if(c==maps.length) {
c=0;
}
obj.src=maps[c].split(',')[0];
obj.useMap=maps[c].split(',')[1];
c++;
setTimeout('swapMap()',speed);
}
window.onload=swapMap;
//]]>
</script>
</head>
<body>
<div id="mapImage_holder">
<img id="mapImage" src="dots.gif" alt="" usemap="#dots"/>
</div>
<div>
<map id="dots" name="dots">
<area coords="85,40,110,65" href="http://www.bbc.co.uk" alt="" />
<area coords="225,100,250,125" href="http://www.itv.com/" alt=""/>
<area coords="345,140,370,165" href="http://www.channel4.com/" alt=""/>
<area coords="405,270,430,295" href="http://www.guardian.co.uk/" alt=""/>
<area coords="35,290,60,315" href="http://www.independent.co.uk/" alt=""/>
<area coords="605,460,630,485" href="http://www.thesun.co.uk/" alt=""/>
</map>
<map id="blood" name="blood">
<area coords="40,144,80,171" href="http://www.codingforums.com/" alt="" />
<area coords="112,144,152,171" href="http://www.w3schools.com/" alt="" />
<area coords="184,144,224,171" href="http://w3c.org/" alt="" />
<area coords="256,144,296,171" href="http://www.alistapart.com/" alt=""/>
</map>
<map id="apples" name="apples">
<area coords="0,0,116,146" href="http://www.axialis.com/" alt=""/>
<area coords="124,0,236,146" href="http://www.photoshopsupport.com/" alt=""/>
<area coords="244,0,360,146" href="http://www.photoshopuser.com/" alt=""/>
<area coords="0,154,116,280" href="http://www.planetphotoshop.com/" alt=""/>
<area coords="124,154,236,280" href="http://www.photoshopcafe.com/" alt=""/>
<area coords="244,154,360,280" href="http://www.mozilla.com/" alt=""/>
</map>
</div>
</body>
</html>
I am very new to web development and I need a push in the right direction here. This is my problem; I am making a web page that will be used privately by two people. I need to find a way to go to an FTP site that can only be accessed by web browser (that is what IT told me) and download a file that has a constant name "prevhour.log" and save this file to a directory so that it can be read (not sure how, my boss is doing that end) and the data will be dumped, and this data will be extrapolated into a gas gauge style dashboard. I need some way of this to be done as automated as possible. Thank you for your time. Rick I am starting a new project soon. Now, the project is still in the stage of planning. But I am quite confuse now which programming language to implement. I am going to design a system where the normal users will update the data with the system while the data required changes will need system administrator to apporve it. I will need a database to keep those records (the data required update) so that the system admin can refer to the database and make changes. Do I have another choice instead of using Microsoft Access 2007 macros or VBA ? I prefer a web-based programming. Any suggestion, please ? Hi, I have this code to get hints (PHP file): Code: <?php
include("include/session.php");
$GetNames = "SELECT firstname, lastname, username FROM users";
$GetNamesConnect = $database->query($GetNames);
While($row = mysql_fetch_array($GetNamesConnect))
{
$a[$row['username']] = $row['firstname'] . " " . $row['lastname'];
}
//get the q parameter from URL
$q=$_GET["q"];
//lookup all hints from array if length of q>0
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<count($a); $i++)
{
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
{
if ($hint=="")
{
$hint=$a[$i];
}
else
{
$hint=$hint.", ".$a[$i];
}
}
}
}
// Set output to "no suggestion" if no hint were found
// or to the correct values
if ($hint == "")
{
$response="no suggestion";
}
else
{
$id = $row['username'];
$response= "<a href='profile.php?user=$row['username']'>$hint</a>";
}
//output the response
echo $response;
?>
This is the display part (Javascript/Ajax) 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" />
<title>Untitled Document</title>
</head>
<body>
<script type="text/javascript">
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gethint.php?q="+str,true);
xmlhttp.send();
}
</script>
</body>
</html>
What I want to do it to limit the names suggested to 10, how would I do this? Hi; I am implementing a Ajax auto suggestion search from database. I find an example from http://www.roscripts.com/Ajax_autosu...abase-154.html . I have not problem with the php part about search from database, but i got a problem from the search from, i added a listerner to input tag, but it still not auto suggest anyword when i type any of word, Could any one help me, Thanks. PHP Code: <html> <head> <title>roScripts - Ajax auto-suggest</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script src="lib/prototype.js" type="text/javascript"></script> <script src="src/scriptaculous.js" type="text/javascript"></script> <script src="src/unittest.js" type="text/javascript"></script> <script src="lib/builder.js" type="text/javascript"></script> <script src="src/controls.js" type="text/javascript"></script> <script src="src/effects.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css" type="text/css" /> </head> <body> <div id="container"> <form method="post" action="response.php"> <label for="testinput">Search</label><br /> <input type="text" id="search" name="search" autocomplete="off" class="input" value="" onkeyup="autoSuggest();" /><br /> <div id="update" style="display:none;position:relative;"></div> <input type="image" name="register" class="submit-btn" src="http://www.roscripts.com/images/btn.gif" alt="submit" title="submit" /> </form> <script type="text/javascript" language="javascript" charset="utf-8"> function autoSuggest(){ new Ajax.Autocompleter('search','update','response.php', { tokens: ','} ); Autocompleter.show(); } </script> </div> </body> </html> I've been using Coffeecup free version for HTML/CSS needs and it works fine as if you forget say one or two values, the prompt feature works fine. Im now getting into Javascript and can see that it is a very useful language, however are there any editors that will provide prompt/suggestion pop ups when editing which are free? If possible, one that combines HTML/CSS/Javascript all together. I've seen this:- http://download.cnet.com/Free-JavaSc...-10907077.html And was going to give it a download. But anyone know of any others or can recommend the above? Thanks Hello, I have a specific need in javascript. Can I be guided in this context if its possible or not??? I am using virtuemart extension in joomla to make an ecommerce website. I will try to explain my requirement with the example. Following is the sample category tree with number. 1.0 .....1.1 ..........1.1.1 ..........1.1.2 .....1.2 ..........1.2.1 ..........1.2.2 .....1.3 ..........1.3.1 ..........1.3.2 2.0 .....2.1 ..........2.1.1 ..........2.1.2 .....2.2 ..........2.2.1 ..........2.2.2 .....2.3 ..........2.3.1 ..........2.3.2 Now I have a drop down main menu as 1.0 and 2.0. I want that when i click on 1.0 all the nodes of 1.0 should be opened and 2.0 should be closed and similarly when i click on 2.0 all its child nodes should be opened and 1.0 should be closed. What happen with most extensions is that at a time only one child is opened. If i click on 1.0 then only 1.1 or 1.2 or 1.3 will remain open at a time. Does this kind of customization can be done or is available in javascript .... I hope i will be helped... Thanks a lot for the time. I need a sort of slide show feature for my page (specifics below). I've spent a lot of time researching this and have not found what I'm looking for. I'm new to jquery and not sure how big of a chore this will be, but here goes: 1. There will be a title bar placed within a right and left arrow on either side. 2. The right and left arrows should cycle through a list of titles (when the right/left arrow is clicked, the title bar will change to the next/previous title in the list). 3. When each title bar is moused over, a new image will fade in above, and then fade out on mouse out. I hope this all makes sense. I'm not looking for some fancy predesigned slideshow, I'll be using my own layout and images. I just need the basic code to perform these actions. Any help would be most appreciated.. Hello guys! :-) So, this is my first post so bare with me I'm currently under education as a webdesigner/developer, and for my exams i need this slide-in function, of a <div> i made. It has to be javascript, and as simple as possible :-) I've found alot of working scripts, but with all sorts of useless junk I can't have in my final result. So: Does any of you know a simple method of making an object slide-in from the side on MO, and slide back out when mouse is removed? Ty in advance! :-) I have the following 3 buttons on my page. I need when on hover on each respective button, the button to light up with a bg image and a slide out rollover in the top direction. How can I achieve this? <div style="padding-left:45px;width:852px;"> <a href=".html" class="Button"> <div style="text-align:center;padding-top:15px;float:left;width:270px;height:45px;background-image:url(images/homeBG.png);background-repeat:no-repeat"> <span id="homeButtonText">Question 1</span><br /> </div> </a> <a href="" class="Button"> <div style="margin-left:18px;text-align:center;padding-top:15px;float:left;width:270px;height:45px;background-image:url(images/homeBG.png);background-repeat:no-repeat"> <span id="homeButtonText">Question 2</span><br /> </div> </a> <a href="" class="Button"> <div style="text-align:center;padding-top:15px;float:right;width:270px;height:45px;background-image:url(images/homeBG.png);margin-right:5px;background-repeat:no-repeat"> <span id="homeButtonText">Question 3</span><br /> </div> </a> </div> Good Day: I am very interested in a slide show as seen on this website (www.linksyssolutions.com). Can anyone direct me as to where I could find a script for this slideshow to use on my site. Thanks very much in advance. |
|||||||