I create a webpage which is scroll horizontal from
http://www.pixxelfactory.net/jInvertScroll/
but now i am create a menu bar when i am click on menu bar the i will scroll left to div
my code is
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>The Hot Air Balloon</title>
<!--<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,700" rel="stylesheet" type="text/css" /> -->
<link rel="stylesheet" href="css/jInvertScroll.css" />
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" >
function changeonhover(a)
{
for(var i =1 ;i<=4;i++)
{
if(i==a)
{
document.getElementById("link"+i).style.color = "blue";
}
else
{
document.getElementById("link"+i).style.color = "white";
}
}
}
</script>
<style type="text/css">
#header {
position: fixed;
top: 0;
z-index: 500;
height: 45px;
}
</style>
</head>
<body>
<div id="header">
<a href="#div1" id="link1" >Div1 </a>
<a href="#div2" id="link2" >Div2 </a>
<a href="#div3" id="link3" >Div3 </a>
<a href="#div4" id="link4" >Div4 </a>
</div>
<div class="container">
<!--<div class="horizon scroll">
<img src="images/background.png" alt="" />
</div>
<div class="middle scroll">
<img src="images/cloudsandballoons.png" alt="" />
</div>
<div class="panel1">
-->
<div class="front scroll">
<h1 class="intro">Scroll down</h1>
<div id="div1" onmouseover="changeonhover('1')" class="panel1 page">
<h2>The Hot Air Balloon</h2>
<p>
The hot air balloon is the oldest successful human-carrying flight technology. It is part of a class of aircraft known as balloon aircraft.
</p>
<p>
On November 21, 1783, in Paris, France, the first untethered manned flight was performed by Jean-François Pilâtre de Rozier and François Laurent d'Arlandes in a hot air balloon created on December 14, 1782 by the Montgolfier brothers. Hot air balloons that can be propelled through the air rather than just being pushed along by the wind are known as airships or, more specifically, thermal airships.
</p>
</div>
<div id="div2" onmouseover="changeonhover('2')" class="panel2 page">
<h2>How they work</h2>
<p>A hot air balloon consists of a bag called the envelope that is capable of containing heated air. Suspended beneath is a gondola or wicker basket (in some long-distance or high-altitude balloons, a capsule), which carries passengers and (usually) a source of heat, in most cases an open flame.
</p>
<p>
The heated air inside the envelope makes it buoyant since it has a lower density than the relatively cold air outside the envelope.
</p>
</div>
<div id="div3" onmouseover="changeonhover('3')" class="panel3 page">
<h2>Practicalities</h2>
<p>As with all aircraft, hot air balloons cannot fly beyond the atmosphere. Unlike gas balloons, the envelope does not have to be sealed at the bottom since the air near the bottom of the envelope is at the same pressure as the air surrounding.
</p>
<p>
For modern sport balloons the envelope is generally made from nylon fabric and the inlet of the balloon (closest to the burner flame) is made from fire resistant material such as Nomex. </p>
</div>
<div id="div4" onmouseover="changeonhover('4')" class="panel4 page">
<h2>Modern ballooning</h2>
<p>
Beginning during the mid-1970s, balloon envelopes have been made in all kinds of shapes, such as rocket ships and the shapes of various commercial products, though the traditional shape remains popular for most non-commercial, and many commercial, applications.
</p>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="http://www.pixxelfactory.net/jInvertScroll/js/jquery.jInvertScroll.js"></script>
<script type="text/javascript">
(function($) {
$.jInvertScroll(['.scroll']);
}(jQuery));
</script>
<script type="text/javascript">
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
</script>
</body>
</html>
but when i click on link i does not work. please help me
Link
You should change this
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
To this (you want the top value to change to the left position value. So scrollTop and position().left
$('html, body').stop().animate({
'scrollTop': $target.position().left
}, 900, 'swing', function () {
window.location.hash = target;
});
On your fiddle, the content div are all on the same "position" so when you click on the links it will not do anything because every div are already on sight.
Instead of trying to use the internal link which are normally used for vertically scrolling, would you mind trying to call your JinvertScroll function on Click on the div links with a parameter of the width from the internal div?
Related
I am trying to experiment with Jquery by writing a small game where i am using html div's as game character, so i have this div with id bullet attach to another div with id player, so i have bind on click action to body so that when user click any part of the page body the player fires the button and i am using the Jquery animate method to do that and it works fine except the bullet goes and remain at the top of the page, whereas i want a case where player can fire many bullets at the same time so how can i achieve this. I do not want my bullet div to go and stick at the top.
app.js file
//Control mouse movement and bullet movement
$(document).ready(function(){
$('body').mousemove(function(event){
var msg = 'Handler for mouse called at'
//moves bullet to current mouse position and player position
$('#bullet').css({'left':event.pageX})
//moves player to the current mouse postion
$('#player').css({'left':event.pageX})
})
})
//Fires bullet
$('body').click(function(){
$('#bullet').animate({'bottom':'500px'})
})
Here is a sample that returns the bullet to the player after it reaches the top. It uses the done option of animate() and this answer to return the bullet.
It is important when the animation is done not to remove the entire style attribute with $("#bullet").removeAttr("style") or similar because that would remove the x-coordinate and place the bullet off to the left until the mouse moves again.
//Control mouse movement and bullet movement
$(document).ready(function() {
$('body').mousemove(function(event) {
var msg = 'Handler for mouse called at'
//moves bullet to current mouse position and player position
$('#bullet').css({
'left': event.pageX
})
//moves player to the current mouse postion
$('#player').css({
'left': event.pageX
})
})
})
//Fires bullet
$('body').click(function() {
$('#bullet').animate({
'bottom': '500px'
}, {
done: function() {
$('#bullet').attr('style', function(i, style) {
return style && style.replace(/bottom[^;]+;?/g, '');
});
}
});
});
#player {
height: 50px;
width: 50px;
background-color: red;
position: relative;
}
#bullet {
margin-top: 550px;
height: 25px;
width: 15px;
position: relative;
margin-left: 18px;
}
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body class="blue lighten-4" id="body">
<div class="orange darken-1" id="bullet">
</div>
<div class="" id="player">
</div>
<footer class="page-footer green lighten-1" id="footer">
<div class="container">
<div class="row">
<div class="col l6 s12">
<!-- <h5 class="green-text lighten-1">Footer Content</h5>
<p class="green-text lighten-1">You can use rows and columns here to organize your footer content.</p> -->
</div>
<div class="col l4 offset-l2 s12">
<!-- <h5 class="white-text">Links</h5>-->
<ul>
<!-- <li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li> -->
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
<!-- © 2014 Copyright Text
<a class="grey-text text-lighten-4 right" href="#!">More Links</a> -->
</div>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
I have this code which is meant to use jQuery so that when the 'Show navigation' button is clicked, that button will disappear, a 'Hide Navigation' button will appear, as will the Navigation options. The hope would be then that the 'Hide' button would do the opposite. I can get the show hide buttons to disappear and reappear accordingly, but the navigation options just stay in place.
Here is the code:
var nav = function(){
$('.navtoggle').click(function(){
$('#navbar').animate({
top:'10px'
}, 200);
$('.navtoggle').animate({
top:'-40px'
}, 200);
$('.navexit').animate({
top:'0px'
}, 200);
});
$('.navexit').click(function(){
$('#navbar').animate({
top:'-40px'
}, 200);
$('.navtoggle').animate({
top:'0px'
}, 200);
$('.navexit').animate({
top:'-40px'
}, 200);
});
};
$(document).ready(nav);
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Home Page</title>
<link href="styles/stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
<script src="navanimate.js"></script>
<div id="top_container">
<div id ="navbar">
<a class="navigation" href="index.html"><p>Home</p></a>
<a class="navigation" href="CV.html"><p>CV</p></a>
<a class="navigation" href="Video.html"><p>Video</p></a>
<a class="navigation" href="Hobbies.html"><p>My Hobbies</p></a>
<a class="navigation" href="Coursework.html"><p>Coursework</p></a>
<a class="navigation" href="Animation.html"><p>Animation</p></a>
</div>
<div class ="navtoggle">Show Navigation</div>
<div class ="navexit">Hide Navigation</div>
<h1>Home Page</h1>
</div>
<div id="main_content">
<p id="site_intro">Over the 6 pages of this website, I shall detail and exemplify everything I have learnt in the labs for the Introduction to Multimedia module. Browse and discover the many things I too have learnt over the last semester. <br><br>Throughout this site you will find many things, including my experience in the past, a short video of me, my favourite things to do, my work this term and the animation developed for the site. Enjoy!</p>
<ul><h3>About Me</h3>
<li>Candidate Number: 106244</li>
<li>Course: Games and Multimedia Environments</li>
<li>Year of Study: First year</li>
</ul>
<img src="images/IMG_0334.JPG" width="932" height="1142" alt="Good ol' picture of myself"/>
</div>
<div id="social_links">
<ul>Find Me Here
<li><img src="images/icons/Free-Shaded-Social-Icons/48/facebook-Icon.png" width="30" height="30" alt="My Facebook"/>Facebook</li>
<li><img src="images/icons/Free-Shaded-Social-Icons/48/Tumblr-Icon.png" width="30" height="30" alt="My tumblr Blog"/>Tumblr</li>
<li><img src="images/icons/Free-Shaded-Social-Icons/48/Deviantart-Icon.png" width="30" height="30" alt=""/>DeviantArt</li>
</ul>
</div>
<div id="footer"></div>
</body>
</html>
I am having some difficulties when trying to hide the URL address for pop up window in javascript. Here is my html:
<div id="menu">
<ul>
<li><a onclick="PopupCenter('./about.html', 'About ePlanner',600,400);" href="javascript:void(0);">About ePlanner</a></li>
<li><a onclick="PopupCenter('./team.html', 'Project Members',600,400);" href="javascript:void(0);">Project Members</a></li>
<li><a onclick="PopupCenter('./faq.html', 'FAQ',600,400);" href="javascript:void(0);">FAQ</a></li>
</div>
And my javascript for pop up window:
<script>
function PopupCenter(pageURL, title,w,h) {
var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
var targetWin = window.open (pageURL,title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
}
</script>
I was wondering is it possible to hide the URL address and as well as the window frame.
Thanks in advance.
To achieve Chrome popups without frames, try the code here (you may need to hardcode content from html pages or integrate with iFrames - let me know if you need help doing that portion):
http://www.sitepoint.com/forums/showthread.php?1175628-Remove-browser-box-border-from-pop-up-window
Here is the example from the resource above [it works great in my Chrome browser with frameless/borderless/address free popup]:
<!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" />
<!-- only for this testpage! --><meta name="robots" content="noindex, nofollow" />
<!-- http://www.sitepoint.com/forums/showthread.php?1175628-Remove-browser-box-border-from-pop-up-window -->
<meta name="Description" content="Choose an Asheville painting company dedicated to providing the highest quality work while getting the job completed on budget and on time. SCI Painting in Burnsville near Asheville NC." />
<meta name="Keywords" content="painting company,exterior paint company,interior paint company" />
<meta name="author" content="SCI Painting" />
<meta name="copyright" content="2013 SCI Painting" />
<link rel="shortcut icon" href="http://scipainting.com/images/favicon.ico" />
<link href="http://scipainting.com/css/style.css" rel="stylesheet" type="text/css" />
<!--
http://www.sitepoint.com/forums/showthread.php?1175628-Remove-browser-box-border-from-pop-up-window
Thread: Remove browser box/border from pop up window
Oct 31, 2013, 11:11
Sculley
Code by Francky
-->
<title>test :: Choose a Quality Asheville Painting Company</title>
<style type="text/css">
html {
height:100%;
overflow-y:scroll;
}
#grayOverlay {
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background-color:#000;
opacity:.7;
z-index:1;
display:none;
}
#center {
position:relative;
}
#popupBox {
top:25px;
left:25px;
right:25px;
bottom:0;
overflow:auto;
background:#f5f5eb;
border:1px solid #e0e2cc;
padding:10px;
text-shadow:1px 1px white;
z-index:1;
}
h2 {
font-size:1.1em;
font-weight:normal;
}
#closePopupBox1,
#closePopupBox2 {
position:absolute;
right:0;
display:none;
}
#closePopupBox1 a,
#closePopupBox2 a {
margin:15px;
padding:0 4px;
border:1px solid #c0c0c0;
border-radius:6px;
background:red;
color:white;
font-size:.8em;
font-weight:bold;
}
</style>
</head>
<body>
<div id="grayOverlay"></div>
<div id="main">
<div id="top">
<div id="header">
<div class="header"><br />
MARC JACKSON<br />
mjackson#scipainting.com<br />
phone 828.442-4107<br />
fax 828.645.6284<br />
65 Monticello Rd./<br />
Weaverville NC 28787
</div><!--end div .header -->
</div><!--end div #header -->
</div><!--end div #top -->
<div id="top-navi">
</div><!--end div #top-navi -->
<div id="mid">
<div id="left-side">
<a href="#popupBox" onclick="openPop();return false">
<img width="125" height="60" alt="What others say" src="http://scipainting.com/images/quote-web.jpg" />
</a>
<img src="http://scipainting.com/images/image1-shadow.png" width="148" height="158" class="first" alt="Image 1" />
<img src="http://scipainting.com/images/image2-shadow.png" width="138" height="141" alt="Image2" />
<img src="http://scipainting.com/images/image3-shadow.png" width="138" height="141" alt="Image 3" />
</div><!--end div left-side -->
<div id="center">
<div align="center"><img src="http://scipainting.com/images/image-main.jpg" width="634" height="292"
alt="SCI Painting in Burnsville NC near Asheville, NC" />
</div>
<div class="txtbox">
<p>Residential and Commercial <br />
projects</p>
<p>Interior and exterior paint <br />
and stain services</p>
<p>Roof and floor coatings</p>
<p>Deck maintenance and cleaning</p>
<p>Pressure washing</p>
<p>Log home protection</p>
<p>Faux finishes</p>
</div><!--end div .txtbox -->
<p>SCI Painting was founded to meet the demand for high quality painting and excellent customer service.
The joining of two family businesses, Sineath Construction’s paint division and C. Manning Paint Service,
provides all of western North Carolina with unmatched services, excellence and value important to families
today. These two companies together bring over 40 years of experience, quality work, reliable service and
a long list of satisfied customers to SCI Painting. We are fully licensed and insured and look forward to
being your choice in paint companies.</p>
<p>Marc Jackson, manager, is focused on keeping pace with the growing needs of clients in western North
Carolina and the challenges that our harsh climate can create. He, along with our experienced employees,
understands the details of all jobs, residential and commercial. Marc is dedicated to providing the highest
quality work while getting the job completed on budget and on time. Marc is not satisfied until the customer
is satisfied. This is all possible because of clear communication that is maintained with the client before,
during, and after the project.</p>
<div id="popupBox">
<h2 id="popHeader">People say...</h2>
<div id="closePopupBox1">X</div>
<p>Meredith Ledford</p>
<p>August 21, 2013</p>
<p>Marc Jackson<br />
SCI Painting<br />
65 Monticello Rd.<br />
Weaverville, NC 28787</p>
<p>Dear Mr. Jackson,</p>
<p>I am writing to you to reiterate my deepest gratitude for the exceptional
work SCI Painting<br />
completed in our new home.</p>
<p>My husband and I were especially impressed given the large scope of the
job and the limited amount of time afforded to you for completion.</p>
<p>Your team of professional painters arrived on the first day eager to
begin and they remained productive and enthusiastic until the job was
completed. Because my husband was out of town, I interacted with your crew
the majority of the time. They were always very friendly and accommodating.<br />
I was especially touched when they
presented with great pride to me the freshly painted nursery – it was
beautiful! I also appreciated their patience as I decided which color to
paint the trim. I struggled with the decision, but I never felt rushed.</p>
<p>Because of SCI Painting’s excellent service, my husband and I were able
to complete our move into our new home before our son was born. Now we
admire your handiwork every day in our new home and marvel at the how
efficiently your crew completed the work. SCI Painting is a first rate
business that strikes the rare balance of value and professionalism. We are
so grateful that we were referred to you for the huge job our home presented
and would enthusiastically recommend your services to anyone.</p>
<p>Thanks again and we hope to see you at "The Rock" this fall for some ASU
football. Go APPS!</p>
<p>Sincerely,</p>
<div id="closePopupBox2">X</div>
<p>Meredith & Dwayne Ledford</p>
</div><!-- end div #popupBox -->
</div><!--end div #center -->
</div><!--end div #mid -->
</div><!--end div main -->
<div id="footer">
<div class="copyright">
<p>© Copyright 2013 scipainting.com | All Rights Reserved <br />
SCI Painting is a partnership with <a href="http://www.sineathconstruction.com/">Sineath Construction in
Weaverville, NC near Asheville, NC</a></p>
</div><!--end div .copyright -->
<div class="copyright">
<p>phone 828.645.6284 | fax 828.682.0676 | 65 Monticello Rd. | P.O. Box 1603 | Weaverville NC 28787</p>
</div><!--end div .copyright -->
</div><!--end div footer -->
<script type="text/javascript">
//<![CDATA[
document.getElementById('popupBox').style.position="absolute";
document.getElementById('popupBox').style.display="none";
document.getElementById('popHeader').style.display="none";
document.getElementById('closePopupBox1').style.display="block";
document.getElementById('closePopupBox2').style.display="block";
function openPop(){
document.getElementById('popupBox').style.display="block";
document.getElementById('grayOverlay').style.display="block";
}
function closePop(){
document.getElementById('popupBox').style.display="none";
document.getElementById('grayOverlay').style.display="none";
}
//]]>
</script>
</body>
</html>
It looks like you can find your answer here for no menu bars:
Opening javascript popup window without address bar and title with height and width set in percentage according to screen resolution
Try this code for no frames:
<script language="Javascript">
<!--
var Width=200 // window width
var Height=200 // window height
var Left = (screen.width/2)-(Width/2) // center
var Top = (screen.height/2)-(Height/2) // center
var Autoclose = true
function openFrameless(url){
FrameLess = window.open(url,"noframewin","fullscreen")
FrameLess.document.body.style.overflow="auto" // auto scrollbars
FrameLess.resizeTo(Width,Height) // resize
FrameLess.moveTo(Left,Top) // position
FrameLess.focus()
if (Autoclose){
window.onunload = function(){
FrameLess.close()
}
}
}
// -->
</script>
Open Frameless
I implemented two different jquery scripts for a website. One is for "unslider" to view sliding photos in the banner div and the other is a hovering underline called magicline.js for the menu div. The problem is unslider stops working when I want to use magicline.js for the menu div. It looks like these two scripts are in conflict with each other. I can't figure out what is happening between these two scripts. Let me know if you have an idea
You can view the website that I am working on at bravodesignbc.com
Here is the html for the site:
<!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" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<title>Untitled Document</title>
<script src="scripts/jquery-1.10.2.min.js"></script>
<script src="scripts/unsliderNew.js"></script>
<script src="scripts/magicLine.js"></script>
<script>
$(function() {
$('.banner').unslider();
});
$('.banner').unslider({
speed: 400, // The speed to animate each slide (in milliseconds)
delay: 3000, // The delay between slide animations (in milliseconds)
keys: true, // Enable keyboard (left, right) arrow shortcuts
dots: false, // Display dot navigation
fluid: false // Support responsive design. May break non-responsive designs
});
</script>
</head>
<body>
<!---
--->
<div id="header">
<div id="headerWrap">
<div id="brand">
<img style="position: absolute; top: 18px; left: 0px;" src="images/bdLogo.png" />
<h1>Bravo Design</h1>
<h3>Renovation & Construction</h3>
</div>
<p id=rightHead> contact us <br /> 604.723.6059</p>
</div>
</div>
<div class="menuWrap">
<ul class="group" id="menu">
<li class="current_page_item">Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
<div id="feature">
<div class="banner">
<div class="buttonPrev">
<img src="images/prev.png" />
</div>
<div class="buttonNext">
<img src="images/next.png" />
</div>
<div class="bottomBanner">
<h2>Serving the lower mainland<br />
for over twenty years
</h2>
</div>
<script>
var unslider = $('.banner').unslider();
$('.unslider-arrow').click(function(event) {
event.preventDefault();
if ($(this).hasClass('next')) {
unslider.data('unslider')['next']();
} else {
unslider.data('unslider')['prev']();
};
});
</script>
<ul>
<li><img src="images/knappen.jpg" /></li>
<li><img src="images/closeupChandelier.jpg" /></li>
<li class="listBg"><h3>Slide 3</h3></li>
</ul>
</div>
</div>
<div id="content">
<div id="contentWrap">
<div id="desc"><p>Bravo Design was created by its founder Waldemar Slonina. Waldemar is pronounced “Valdemar” in Polish. Waldemar started Bravo Design unofficially in 1992 when he arrived in Vancouver from Europe. He originally worked for another larger company, at first, but did side jobs, where he first got a taste of owning a business. Then, he began with a small framing business, which quickly led to more work in renovations and construction around Vancouver. Soon, he started to gain business all around the Lower Mainland. Since, he has worked locally in the Tri-cities and Vancouver.<br /><br />
His former clients would classify him as reliable, on-budget, hard working, on-schedule, and diligent. These qualities have helped him sustain a successful small business for over two decades. He approaches each new project with enthusiasm!<p>
</div>
<div id="column">
<h3 style="padding-left: 10px; padding-top: 10px;">Testimonials</h3>
<p style="padding: 10px; padding-top: 0px;">"The job you did with our kitchen is amazing yayayayyayayda" <br />
<i>-Art Vandelay,</i> Maple Ridge</p>
</div>
</div>
</div>
<div id="footer">
<div id="footerWrap">
<div id="leftFoot"><img style="position: absolute; top: 10px; left: 0px;" src="images/logoMini.png" />
<p style="position: absolute; top: 10px; left: 40px;" > Bravo Design</p>
<p style="position: absolute; top: 28px; left: 40px; font-size: 11px; border-top:solid 1px #FFF;" > Renovation & Construction</p>
</div>
<div id="rightFoot"><p style="font-size: 12px;">Copyright 2013. Bravo Design. All rights reserved.<br />
Website design by think Chameleon</p></div>
</div>
</div>
</body>
</html>
I have searched high and low for an answer and have found similar examples of the problem but the answers do not apply to my scenario. The reality is I am new to this and therefore I don't have the skills to adapt the answers I have found to my problem.
The problem:
I have a Div in which when a thumbnail is clicked the Div image replaces with another image via a JavaScript/jQuery script (I am not sure exactly maybe someone could clarify). This works fine however the problem is the page scrolls back to the top and the user then has to scroll back down to see the image after it has replaced itself.
I have looked online and have found that a return false: in the JavaScript may help however I have looked and return false is already present.
The other option I have looked at using is a JavaScript cookie based solution in which a cookie is sent, and the browser scroll position is maintain by reading the cookie however I cant seem to get that solution to work, I think the issue may be caused because I am hosting locally but I may be wrong...
The third is using a PHP script but I have not found a definitive answer on this method and it also means I am going to have to learn about PHP (something I'm sure I will have to learn in time anyway).
Here is the JavaScript:
<script type="text/javascript">
$(document).ready(function() {
$('.galleryicon').live("click", function() {
$('#mainImage').hide();
$('#cakebox').css('background-image', "url('ajax-loader.gif')");
var i = $('<img />').attr('src',this.href).load(function() {
$('#mainImage').attr('src', i.attr('src'));
$('#cakebox').css('background-image', 'none');
$('#mainImage').fadeIn();
});
return false;
});
});
</script>
Here is the html:
<div class="cakecont">
<div id="cakebox">
<img src="../images/cakes/babycake1.png" alt="Main Image" id="mainImage"/>
<div class="pageinfo2">
<h3>Cake Type 1</h3>
<h6>£2.00</h6>
</div>
<div class="infobox">
<h6> Description </h6>
</div>
<div class="gallerybox">
<a href="../images/cakes/babycaketop.png" class="galleryicon">
<img src="../images/thumbs/babycaketopsml.png" alt="Thumbnail 2"/></a>
<a href="../images/cakes/babycake1.png" class="galleryicon">
<img src="../images/thumbs/babycakesml.png" alt="Image 1"/></a>
</div>
</div>
</div>
And here is a link to the working demo http://micahcarrick.com/code/jquery-image-swap/index.html
I have tried to resolve this on my own. This is the first question I have had to ask so far regarding the building of my website, all my learning and remedies to past problems have been served by Google, this one has eluded my search engine skills.
Below I have added all the html for the page in case there may be other script overriding the "new" modified JavaScript -
<!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>Cupcakes & Cakes for Birthday/Wedding Gift in Bournemouth Dorset - SweetVision</title>
<meta name="keywords" content="cupcakes, cake, gift, wedding, birthday, Bournemouth, Dorset" />
<meta name="description" content="For the finest Cupcakes and Cakes in Bournemouth Dorset look no further, Sweetvision specialise in baked goods for Weddings, Birthdays, Baby Showers, Easter, Halloween, Christmas" />
<meta name="robots" content="ALL" />
<meta http-equiv= "Content-Language" content="en" />
<meta name="Publisher" content="Sweet Vision" />
<meta name="Copyright" content="Copyright 2012, Sweet Vision, All rights reserved." />
<meta name="Author" content="Mark Webb for Sweet Vision - www.sweetvision.co.uk" />
<link href="../images/homepage/favicon.ico" type="image/vnd.microsoft.icon" rel="shortcut icon" />
<link href="../root/css/sweetvision.css" rel="stylesheet" type="text/css" />
<script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.galleryicon').live("click", function(e) { // the (e) represent the event
$('#mainImage').hide();
$('#cakebox').css('background-image', "url('ajax-loader.gif')");
var i = $('<img />').attr('src',this.href).load(function() {
$('#mainImage').attr('src', i.attr('src'));
$('#cakebox').css('background-image', 'none');
$('#mainImage').fadeIn();
});
e.preventDefault(); //Prevent default click action which is causing the
return false; //page to scroll back to the top
});
});
</script>
<script src="../js/s3Slider.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script>
<script src="../js/SpryMenuBar.js" type="text/javascript"></script>
<link href="../root/css/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="sprybox">
<ul id="check_menu" class="MenuBarHorizontal">
<li>Home</li>
<li>About Us
<ul>
<li>Contact</li>
<li>News</li>
<li>Events</li>
</ul>
</li>
<li>Our Menu</li>
<li>Gallery</li>
</ul>
<div class="mainmenu">
<a href="../root/mainmenu.html">
<img src="../images/buttons/mainmenu.png" />
</a>
</div>
<div class="backbutton">
<a href="javascript:history.go(-1)">
<img src="../images/buttons/Backbutton.png" /></a>
</div>
</div> <!-- end.header --><!--end of sprybox -->
<!--end div element -->
<!-- thumbnails are links to the full size image -->
<div class="cakecont">
<div id="cakebox">
<img src="../images/cakes/babycake1.png" alt="Main Image" id="mainImage"/>
<div class="pageinfo2">
<h3>Cake Type 1</h3>
<h6>£2.00</h6>
</div>
<div class="infobox">
<h6> Description </h6>
</div>
<div class="gallerybox">
<a href="../images/cakes/babycaketop.png" class="galleryicon">
<img src="../images/thumbs/babycaketopsml.png" alt="Thumbnail 2"/></a>
<a href="../images/cakes/babycake1.png" class="galleryicon">
<img src="../images/thumbs/babycakesml.png" alt="Image 1"/></a>
</div>
</div>
</div>
<div class="footer">
<p>Copyright © 2012 by Mark Webb. All rights reserved.</p>
</div> <!-- end .footer -->
</div> <!-- end .container -->
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("check_menu",{imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-29457683-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>
</body>
</html>
You can save the current scroll amount and then set it later:
var tempScrollTop = $(window).scrollTop();
..//Your code
$(window).scrollTop(tempScrollTop);
For all who came here from google and are using an anchor element for firing the event, please make sure to void the click likewise:
<a
href='javascript:void(0)'
onclick='javascript:whatever causing the page to scroll to the top'
></a>
Try the code below to prevent the default behaviour scrolling back to the top of the page
$(document).ready(function() {
$('.galleryicon').live("click", function(e) { // the (e) represent the event
$('#mainImage').hide();
$('#cakebox').css('background-image', "url('ajax-loader.gif')");
var i = $('<img />').attr('src',this.href).load(function() {
$('#mainImage').attr('src', i.attr('src'));
$('#cakebox').css('background-image', 'none');
$('#mainImage').fadeIn();
});
e.preventDefault(); //Prevent default click action which is causing the
return false; //page to scroll back to the top
});
});
For more information on event.preventDefault() have a look here at the official documentation.
What you want to do is prevent the default action of the click event. To do this, you will need to modify your script like this:
$(document).ready(function() {
$('.galleryicon').live("click", function(e) {
$('#mainImage').hide();
$('#cakebox').css('background-image', "url('ajax-loader.gif')");
var i = $('<img />').attr('src',this.href).load(function() {
$('#mainImage').attr('src', i.attr('src'));
$('#cakebox').css('background-image', 'none');
$('#mainImage').fadeIn();
});
return false;
e.preventDefault();
});
});
So, you're adding an "e" that represents the event in the line $('.galleryicon').live("click", function(e) { and you're adding the line e.preventDefault();
I had a similar problem getting scrollTop to work after reload of div content. The content scrolled to top each time the procedure below was run. I found that a little delay before setting the new scrolltop solved the issue.
This is cut from wdCalendar where I modified this procedure:
function BuildDaysAndWeekView(startday, l, events, config)
....
var scrollpos = $("#dvtec").scrollTop();
gridcontainer.html(html.join(""));
setTimeout(function() {
$("#dvtec").scrollTop(scrollpos);
}, 25);
....
Without the delay, it simply did not work.
Something to note, when setting the scroll position, make sure you do it in the correct scope. For example, if you're using the scroll position in multiple functions, you would want to set it outside of these functions.
$(document).ready(function() {
var tempScrollTop = $(window).scrollTop();
function example() {
console.log(tempScrollTop);
};
});
$('html,body').animate({
scrollTop: $('#answer-<%= #answer.id %>').offset().top - 50
}, 700);