मैंने उत्तर के लिए उच्च और निम्न खोज की है और समस्या के समान उदाहरण पाए हैं लेकिन उत्तर मेरे परिदृश्य पर लागू नहीं होते हैं। हकीकत यह है कि मैं इसके लिए नया हूं और इसलिए मेरे पास मेरी समस्या के जवाबों को अनुकूलित करने के लिए कौशल नहीं है।एक jquery घटना के बाद पृष्ठ स्क्रॉल स्थिति को बनाए रखने के लिए कैसे किया जाता है?
समस्या:
मैं एक डिव जिसमें जब एक थंबनेल क्लिक किया जाता है डिव छवि एक जावास्क्रिप्ट/jQuery स्क्रिप्ट के माध्यम से एक और छवि के साथ की जगह है (मुझे यकीन है कि वास्तव में हो सकता है किसी को स्पष्ट कर सकते नहीं कर रहा हूँ)। यह ठीक काम करता है हालांकि समस्या यह है कि पेज शीर्ष पर वापस स्क्रॉल करता है और उपयोगकर्ता को इसे बदलने के बाद छवि को देखने के लिए नीचे स्क्रॉल करना पड़ता है।
मैं ऑनलाइन देखा है और पाया है कि एक वापसी झूठी: जावास्क्रिप्ट में हालांकि मैं ध्यान दिया है मदद और वापसी झूठी पहले से मौजूद है हो सकता है।
मैं जिस अन्य विकल्प का उपयोग कर रहा हूं वह एक जावास्क्रिप्ट कुकी आधारित समाधान है जिसमें एक कुकी भेजी जाती है, और ब्राउजर स्क्रॉल स्थिति कुकी पढ़ने से बनाए रखती है, हालांकि मुझे लगता है कि काम करने के लिए मुझे यह समाधान नहीं मिल रहा है, मुझे लगता है कि समस्या का कारण हो सकता है क्योंकि मैं स्थानीय रूप से होस्ट कर रहा हूं लेकिन मैं गलत हो सकता हूं ...
तीसरा एक PHP स्क्रिप्ट का उपयोग कर रहा है लेकिन मुझे इस विधि पर एक निश्चित उत्तर नहीं मिला है और इसका भी अर्थ है कि मुझे सीखना होगा PHP के बारे में (मुझे यकीन है कि मुझे वैसे भी समय में सीखना होगा)।
यहाँ जावास्क्रिप्ट है:
<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>
यहाँ एचटीएमएल है:
<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>
और यहाँ काम कर डेमो http://micahcarrick.com/code/jquery-image-swap/index.html
मैं पर इस को हल करने की कोशिश की है के लिए एक लिंक है मेरी खुद। यह मेरी पहली वेबसाइट है कि मुझे अपनी वेबसाइट के निर्माण के बारे में अभी तक पूछना है, मेरी सारी शिक्षा और पिछले समस्याओं के उपचार Google द्वारा परोसे गए हैं, इसने मेरे खोज इंजन कौशल को दूर किया है।
नीचे मैं मामले में पृष्ठ के लिए सभी एचटीएमएल जोड़ लिया है अन्य स्क्रिप्ट 'नई' संशोधित जावास्क्रिप्ट अधिभावी भी हो सकते हैं -
<!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><a href="../root/index.html">Home</a></li>
<li><a href="../root/aboutus.html" class="MenuBarItemSubmenu">About Us</a>
<ul>
<li><a href="../root/contactus.html">Contact</a></li>
<li><a href="../root/news.html">News</a></li>
<li><a href="../root/events.html">Events</a></li>
</ul>
</li>
<li><a href="../root/ourmenu.html">Our Menu</a></li>
<li><a href="gallery.html">Gallery</a></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>
जब मैं पृष्ठ पर जाएँ, मैं किसी भी स्क्रॉल बार नहीं दिख रहा। पूरा पृष्ठ स्क्रीन पर फिट बैठता है। क्या आप एक छोटे संकल्प का उपयोग कर रहे हैं? – kevin628
हाँ मैं लैपटॉप पर हूं इसलिए मुझे स्क्रॉलिंग प्रभाव मिलता है, धन्यवाद। – marky