I try to create a web page with a fixed navigation bar at the top that covers the content underneath. When loading the page with an anchor in the url the normal behaviour is that the page scrolls the anchor to the top of the window. But then that content is hidden under the navigation bar. So I try to solve this problem with JavaScript scrollTo(). My solution works fine with Firefox and Opera but not in Chrome. Please try the example. Any ideas how to fix this issue in Chrome? Thank you.
test.htm:
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<meta charset='UTF-8'>
<style type='text/css'>
#navi { position:fixed; left:0; top:0; width:100%; height:100px; background-color:yellow; }
#spacer { background-color:cyan; height:100px; }
#spacer2 { height:1000px; }
.style1 { background-color:green; height:200px; }
</style>
<script type='text/javascript'>
/* <![CDATA[ */
function scrollAnchor() { // doesn't work in Chrome
var y = document.getElementById(window.location.hash.substr(1)).offsetTop - 110;
window.scrollTo(0, y);
//alert(y);
}
/* ]]> */
</script>
</head>
<body id='top' onload='scrollAnchor();'>
<div id='navi'>
<a href='./test2.htm'>Menu</a>
</div>
<div id='main'>
<div id='spacer'></div>
<h3 id='1'>Heading 1</h3><p class='style1'></p>
<h3 id='2'>Heading 2</h3><p class='style1'></p>
<h3 id='3'>Heading 3</h3><p class='style1'></p>
<h3 id='4'>Heading 4</h3><p class='style1'></p>
<h3 id='5'>Heading 5</h3><p class='style1'></p>
<h3 id='6'>Heading 6</h3><p class='style1'></p>
<div id='spacer2'></div>
</div>
</body>
</html>
test2.htm:
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<meta charset='UTF-8'>
</head>
<body>
<a href='test.htm#1'>Heading 1</a>
<a href='test.htm#2'>Heading 2</a>
<a href='test.htm#3'>Heading 3</a>
<a href='test.htm#4'>Heading 4</a>
<a href='test.htm#5'>Heading 5</a>
<a href='test.htm#6'>Heading 6</a>
</body>
</html>
Chrome is so fast that your scrollTo() action fires before Chrome's default scroll to html anchor event.
Give it a tiny delay by using
setTimeout(function() {window.scrollTo(0, y);},1)
Or simply avoid using the actual element id as hash name
instead of using
test.htm#6
use
test.htm#link_6
then you can get the real id by doing something like
window.location.hash.split('_')[1]
Hope it helps.
I would suggest avoiding the use of JavaScript in favor of creating a dedicated anchor element and then offsetting it above the heading by at least your header height.
This has already been well described in https://stackoverflow.com/a/13184714/5951116.
Your code would then look something like this:
<div id='navi'>
<a href='./test2.htm'>Menu</a>
</div>
<div id='main'>
<div id='spacer'></div>
<div class='article-wrapper'>
<a class='anchor' id='1'></a>
<h3>Heading 1</h3><p class='style1'></p>
</div>
<div class='article-wrapper'>
<a class='anchor' id='2'></a>
<h3>Heading 2</h3><p class='style1'></p>
</div>
...
</div>
#navi {
height: 50px;
}
#main a.anchor {
display: block;
position: relative;
top: -50px;
visibility: hidden;
}
Or use CSS variables to remove as much tight coupling as possible:
:root {
--header-height: 50px;
}
#navi {
height: var(--header-height);
}
#main a.anchor {
display: block;
position: relative;
top: -var(--header-height);
visibility: hidden;
}
Related
I want to have a fullscreen popup over the whole page, but I've only found that you need to place it at the body root
<body>
<div id="popup" >
...
</div>
<div id="page">
<div id="content" >...</div>
</div>
</body>
But that's not what I need. I need to have a fullscreen popup adding it inside the page.
<body>
<div id="page">
<div id="popup" >
...
</div>
<div id="content" >
...
</div>
</div>
</body>
The problem is that if I do this, the popup is not fullscreen, but it appears only over the "page" div, while I want it to be fullscreen
I added a live example https://www.w3schools.com/code/tryit.asp?filename=GS0R8SGBW8CS as you can see the popup is not entirely full screen
Remove style="margin:2rem" from popup div
https://www.w3schools.com/code/tryit.asp?filename=GS0RIDZF6HMF
<style>
.Docdiv
{
position:relative;
z-index: 2;
width:1000px; overflow: hidden;
position: fixed;
top: 3%;bottom: 3%;
right:183px;
color: black;
}
</style>
<div class="Docdiv" style="min-height: 100%;">
</div>
The answer was that I had a parent div with the clip style attribute. I removed it and now the popup is fullscreen. Thanks everyone.
i am using jquery plugin pace.js, and i want that when the page is load then first the progress bar is loaded after that the content will shown,
this is my code
<div class="pace pace-inactive">
<div class="pace-progress" data-progress-text="100%" data-progress="99" style="width: 100%;">
<div class="pace-progress-inner"></div>
</div>
<div class="pace-activity"></div>
</div>
the jsfiddle will define the result of my work.
in my case the content and progress bar both will show simultaneously.
What i want: i want that first the progress bar will show and after the complition of progress bar the content will show like in this website.
Update:
This is what i try next but when the progress is complete then it will not show any contents...
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bk</title>
<link rel="stylesheet" href="css/pace-atom.css"/>
<style>
#contents {
display: none;
}
.cover {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 1999;
background:rgb(33,33,33);
}
</style>
</head>
<body class="pace-done">
<div class="pace pace-inactive">
<div class="pace-progress" data-progress-text="100%" data-progress="99" style="width: 100%;">
<div class="pace-progress-inner"></div>
</div>
<div class="pace-activity"></div>
</div>
<div>
<div id="contents">
<img src="d3.jpg" alt=""/>
<img src="d1.jpg" alt=""/>
<img src="d2.jpg" alt=""/>
<img src="d2.jpg" alt=""/>
<img src="d1.jpg" alt=""/>
</div>
</div>
<script src="js/pace.js"></script>
<script type="text/javascript">
$(function() {
Pace.on("done", function(){
$("#contents").fadeIn(1000);
});
}
</script>
</body>
</html>
If the progress bar stuck at 99%, and if you are using Visual Studio, you have to uncheck 'Enable Browser Link' option. This will solve the incomplete progress bar issue.
Okay so an easy way to implement this is to hide all your contents until pace is done loading (I assume there is a reasoning to pace's load screen but I'm not sure).
So your contents could have an id #contents and be default display: none. You can then show the contents after pace is done like so
$(function() {
Pace.on("done", function(){
$("#contents").fadeIn(1000);
});
});
Here is a fiddle of it working http://jsfiddle.net/59caubpx/3/
Please check that you add all the file properly, like jquery.js or theme.atom.css or pace.js etc...
I'm currently trying to build a mobile image gallery using PhotoSwipe.
I've been able to get it working but there's one small problem. When I
click on a photo thumbnail, the actual photo always takes up the entire
viewport. This is OK when you're viewing the gallery on a mobile device.
But if your viewport is a computer screen and the image isn't a
high-res one, the photo can be very blurry. I'd rather limit the photo
to a width of maybe 300 to 400 pixels when viewed on a computer. Is there
a way to do this in PhotoSwipe? I read the documentation but couldn't
quite figure it out. I've enclosed my code below.
Thanks.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PhotoSwipe - jQuery Mobile Version</title>
<link rel="stylesheet" href="lib/jquery.mobile-1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<link rel="stylesheet" href="lib/photoswipe/photoswipe.css" />
<link rel="stylesheet" href="css/mediaqueries.css" />
<style type="text/css">
div.gallery-row:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
div.gallery-item {
float: left;
width: 33.333333%;
}
div.gallery-item a {
display: block;
margin: 5px;
border: 1px solid #3c3c3c;
}
div.gallery-item img {
display: block;
width: 100%;
height: auto;
}
#Gallery1 .ui-content, #Gallery2 .ui-content {
overflow: hidden;
}
</style>
<script type="text/javascript" src="lib/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="lib/jquery.mobile-1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<script type="text/javascript" src="lib/simple-inheritance.min.js"></script>
<script type="text/javascript" src="lib/jquery.animate-enhanced.min.js"></script>
<script type="text/javascript" src="lib/photoswipe/code-photoswipe-jQuery-1.0.11.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div.gallery-page').live('pageshow', function(e) {
// Re-initialize with photos for the current page
$('div.gallery a', e.target).photoSwipe();
return true;
});
});
</script>
</head>
<body>
<div data-role="page" id="Home">
<div data-role="header">
<h1>PhotoSwipe</h1>
</div>
<div data-role="content" >
<p>These examples show PhotoSwipe integrated with jQuery Mobile:</p>
<ul data-role="listview" data-inset="true">
<li>First Gallery</li>
<li>Second Gallery</li>
</ul>
</div>
<div data-role="footer">
<h4>© 2011 PhotoSwipe</h4>
</div>
</div>
<div data-role="page" id="Gallery1" class="gallery-page">
<div data-role="header">
<h1>First Gallery</h1>
</div>
<div data-role="content">
<div class="gallery">
<div class="gallery-row">
<div class="gallery-item"><img src="images/01-thumb.jpg" alt="Image 1" /></div>
<div class="gallery-item"><img src="images/02-thumb.jpg" alt="Image 2" /></div>
<div class="gallery-item"><img src="images/03-thumb.jpg" alt="Image 3" /></div>
</div>
<div class="gallery-row">
<div class="gallery-item"><img src="images/04-thumb.jpg" alt="Image 4" /></div>
<div class="gallery-item"><img src="images/05-thumb.jpg" alt="Image 5" /></div>
<div class="gallery-item"><img src="images/06-thumb.jpg" alt="Image 6" /></div>
</div>
<div class="gallery-row">
<div class="gallery-item"><img src="images/07-thumb.jpg" alt="Image 7" /></div>
<div class="gallery-item"><img src="images/08-thumb.jpg" alt="Image 8" /></div>
<div class="gallery-item"><img src="images/09-thumb.jpg" alt="Image 9" /></div>
</div>
</div>
</div>
<div data-role="footer">
<h4>© 2011 PhotoSwipe</h4>
</div>
</div>
</body>
</html>
PhotoSwipe has a modal option:
var options = {
modal: false
}
var gallery = new PhotoSwipe( someElement, PhotoSwipeUI_Default, someItems, options);
gallery.init();
which makes the PhotoSwipe container take only the size of its parent when set to false.
You can put Photoswipe markup (root element with class pswp) to any container with position: relative and edit photoswipe.css or add to your stylesheet something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Photoswipe in container</title>
<style>
#myContainer {
position: relative;
/* other container styles */
}
.pswp {
position: absolute!important;
}
</style>
</head>
<body>
<div id="myContainer">
<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<!-- standard markup omitted -->
</div>
</div>
</body>
</html>
I do not know of an automatic way to do this, what i did was to put the .pswp div inside of a container div with fixed width and height and then position that container div via JS + CSS in the center of the screen.
Use a basic setup as described on the photoswipe documentation with the pswp div already added and then:
HTML
<div id="pswp-container">
<div class="pswp">
...
</div>
</div>
CSS
#pswp-container {
position: fixed;
left: 100px;
right: 100px;
top: 100px;
bottom: 100px;
}
.pswp {
position: relative !important;
}
JS
// Centers the Photoswipe container in the center of the screen (call on init + resize)
function centerPhotoswipe() {
var ww = $(window).innerWidth();
var wh = $(window).innerHeight();
var $el = $("#pswp-container");
var w = $el.outerWidth();
var h = $el.outerHeight();
$el.css({
left: Math.round( (ww-w) / 2),
top: Math.round( (wh-h) / 2)
});
}
You can find a working example here at CodePen.
This should give you the desired effect and a good starting point for your own page, BUT keep in mind that it will be necessary to add your own background layer to trigger the 'close on click somewhere else' and other details that you have to fix during the opening / closing events of the popup ...
I tried all sorts of solutions to get this to work properly, including the inline gallery options (demo).
However I couldn't quite get it to work as I wanted as I needed the a specific gallery to display without showing the thumbnails first.
What I did in the end was get a basic PhotoSwipe page working which automatically loaded the images on page load to a full screen, for example using an MVC URL:
/Gallery/Index/1
then simply embed this link in a div using object:
<div id="mygallery1">
<object data="/Gallery/Index1">
Error: Embedded data could not be displayed.
</object>
</div>
This allowed me to place as many galleries as I wanted in whatever position I wanted without any interference between them.
Note though that this didn't seem to work for mobile browsers, which was fine as for screens that small I wanted a fallback option anyway to render as an overlay over the whole page due to limited screen real estate.
I've been trying to make a div inside a container div visible when the mouse is moved over the container div. Currently the div that needs to be made visible has property display set as none. I've tried repeatedly to make this work with javascript to no avail. could someone help me out please? The code is included below.
HTML
<html>
<!--Header Files-->
<head>
<!--Icon for tabbed browsers-->
<link rel="shortcut icon" href="images/favicon.ico" type="image/png"/>
<!--Including the CSS file that gives all the appearance attributes to the page-->
<link type="text/css" rel="stylesheet" href="css/talentdatabase.css"/>
<!--Including the JavaScript file to give interaction with the web objects-->
<script src="js/talentdatabase.js" type="text/javascript" charset="utf-8"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<!--Title of the page-->
</head>
<!--Body-->
<body>
<!--Top Banner-->
<div class="button">
</div>
<div class="head">
<a href="index.html"><div class="logo">
<image src= "" height="60px" width="320px"/>
</div></a>
<div class="contact">
</div>
</div>
<div class="bar">
<a href="talentdatabase.html"><div class="one">
<h3>Talent Database</h3>
</div></a>
<a href="facilities.html"><div class="two">
<h3>Facilities</h3>
</div></a>
<a href="print.html"><div class="three">
<h3>Print Campaigns</h3>
</div></a>
<a href="tv.html"><div class="four">
<h3>TV Campaigns</h3>
</div></a>
<a href="contact.html"><div class="five">
<h3>Contact Us</h3>
</div></a>
</div>
<div class="container">
<div class="column1">
<div class="pic1"><image src= "images/talentdatabase/back/man.png" height="100%" width="100%"/></div>
<div class="caption">Male </div>
<div class="popcontain1">
<div class="apop1">  Fresh Talent</div>
<div class="apop2">Mature Models  </div>
<div class="apop3">  Active Models</div>
</div>
</div>
<div class="gutter1">
</div>
<div class="column2">
<div class="pic2"><image src= "images/talentdatabase/back/woman.png" height="100%" width="100%"/></div>
<div class="caption">Children </div>
<div class="popcontain2">
<div class="bpop1">  Boy</div>
<div class="bpop2">G   i   r   l   </div>
</div>
</div>
<div class="gutter2">
</div>
<div class="column3">
<div class="pic3"><image src= "images/talentdatabase/back/child.png" height="100%" width="100%"/></div>
<div class="caption">Female </div>
<div class="popcontain3">
<div class="apop1">  Fresh Talent</div>
<div class="apop2">Mature Models  </div>
<div class="apop3">  Active Models</div>
</div>
</div>
</div>
<div class="bottombar">
<a href="index.html"><div class="one">
<h3>Home</h3>
</div></a>
<div class="bottomleft">
<h3></h3>
</div>
</div>
</body>
</html>
What I've been trying to do is make popcontain1 turn visible when column1 is mouseover-ed.
The css is:
.container{
position:absolute;
width:80%;
height:75%;
top:20%;
left:10%;
}
.column1{
visibility:visible;
font-family:deconeuelight;
position:absolute;
width:32%;
height:100%;
padding:0px;
color:white;
}
.popcontain1{
display:none;
}
.apop1{
position:absolute;
text-align:left;
font-size:1.5em;
background: rgb(247, 121, 0);
background: rgba(247, 121, 0, .6);
width:100%;
top:60%;
}
.apop2{
position:absolute;
text-align:right;
font-size:1.5em;
background: rgb(255, 241, 35);
background: rgba(255, 241, 35, .4);
width:100%;
top:70%;
}
.apop3{
position:absolute;
text-align:left;
font-size:1.5em;
background: rgb(50, 205, 50);
background: rgba(50, 205, 50, .6);
width:100%;
top:80%;
}
For this I've been using the following code in the javscript file:
$(document).ready(function() {
$(".column1").hover(function () {
$(".popcontain1").toggle();
})
})
EDIT:
Am I including all the right libraries? I'm using the google hosted jquery library.
First thing you are trying to display a div with class pop contain which is not present there.
So why its not displaying.
Second thing you are using toggle inside hover first argument function, so next time if you will hover the column it will hide popcontain1 div.
Looking your code it seems you want to apply hover on each column and display popcontain inside it.
So why not make it generic. Add a common class on every column div say 'column' and on popcontain div say'popcontain';
Now this will work for all div.
If you want to show it on mouse over and hide on mouse out.
$(document).ready(function() {
$(".column").hover(function () {
$(this).find(".popcontain").toggle();
},function(){
$(this).find(".popcontain").toggle();
})
})
If you want to permanently show it on first hover.
$(document).ready(function() {
$(".column").hover(function () {
$(this).find(".popcontain").show();
})
})
However you don't need to use jquery if you just want to show hide the inner popcontain.
Following css will help you to achieve what you want.
.popcontain{
display:none;
}
.column:hover .popcontain{
display:block;
}
Edit for your first comment
If you are trying it on local put http: in the link you have included jquery. change this link
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
to
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
If you are not putting http: it is searching jquery file on local file system instead of web.
Since you have multiple use an CSS attribute selector to find the element whose class starts with popcontain with:
$("[class^=column]").hover(function () {
$("[class^=popcontain]").toggle();
})
I'm creating a website with horizontal scrolling. I'm using this jQuery plugin for automatic scrolling. Below is the code.
HTML
<head>
<link type="text/css" rel="stylesheet" href="stylesheets/styles.css" />
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="container">
<div id="navigation">
<ul>
<li>
<div class="menubutton" id="homeLink"><a class="menuitem" href="#"></a></div>
</li>
<li>
<div class="menubutton" id="aboutLink"><a class="menuitem" href="#"></a></div>
</li>
<li>
<div class="menubutton" id="musicLink"><a class="menuitem" href="#"></a></div>
</li>
</ul>
</div><!-- end of navigation -->
<div id="firstMark"></div>
<div id="secondMark"></div>
<div id="thirdMark"></div>
</div>
</body>
</html>
CSS
#charset "utf-8";
ul li { list-style-type:none; }
/* navigation */
#navigation { position:fixed; z-index:5; bottom:80px; left:-26px; background-color:#FFF; width:70px; height:190px; border-top-right-radius:10px; border-bottom-right-radius:10px; }
.menubutton { float:left; width:20px; height:20px; border-radius: 50%; background-color:#F00; margin-bottom:15px; }
.menubutton:hover { cursor:pointer; }
#homeLink { background-color:#007FD2; }
#aboutLink { background-color:#C7007A; }
#musicLink { background-color:#FFDB1A; }
#brandsLink { background-color:#000; }
#contactLink { background-color:#F90; }
#homeLink:hover { background-color:#006DB4; }
#aboutLink:hover { background-color:#99005E; }
#musicLink:hover { background-color:#FFC61A; }
#brandsLink:hover { background-color:#333; }
#contactLink:hover { background-color:#F60; }
#container {
position:absolute;
width:10000px;
height:100%;
background-color:#FFC;
top:0;
left:0;
}
#firstMark {
position:absolute;
width:1px;
height:1px;
left:3000px;
}
#secondMark {
position:absolute;
width:1px;
height:1px;
left:6000px;
}
#thirdMark {
position:absolute;
width:1px;
height:1px;
left:9000px;
}
JavaScript
$(document).ready(function(e) {
$('#homeLink').click(function(e) {
e.preventDefault();
$.scrollTo(0,0, {duration: 2000});
});
$('#aboutLink').click(function(e) {
e.preventDefault();
$.scrollTo('#firstMark', {duration: 2000});
});
$('#musicLink').click(function(e) {
e.preventDefault();
$.scrollTo('#secondMark', {duration: 2000});
});
});
Here's the link to a demo page. This works in Firefox(v18), Opera(v12), Safari(v5.1.2) and even Internet Explorer 9 but it doesn't work in Chrome(v24).
Can anybody tell me what's missing here? It it something wrong with my code or a bug in the plugin?
Failing that, please tell me if there are any other alternatives to automatic scrolling which also supports horizontal scrolling.
Thank you.
Old question but I'll write down my experience.
I had the same issue with that plugin downloaded from http://flesler.blogspot.com/2007/10/jqueryscrollto.html
That plugin in the article is outdated, you can download the latest version here: https://github.com/flesler
Also you will also have to change
$.scrollTo(0,0, {duration: 2000});
to
$.scrollTo("0px","0px", {duration: 2000});
Your anchor might be receiving the click event rather than the div.
Just give this a quick try:
$('#homeLink a').click(function(e) {
e.preventDefault();
alert('click');
$.scrollTo(0,0, {duration: 2000});
});
I added an alert('click') as well so you can tell if it's been detected.
Try using px will scroll value
Change
$.scrollTo(0,0, {duration: 2000});
to
$.scrollTo(0px,0px, {duration: 2000});
The bug is in webkit's ability to animate the body. Instead, create a div just inside body and apply the animation to this instead...
<body>
<div class="wrapper">
<nav>
<a class="scroll-to-id" href="#" data-target="section1">Section 1</a>
<a class="scroll-to-id" href="#" data-target="section2">Section 2</a>
</nav>
<section>
<a id="section1"> </a>
<p>Some content<p>
</section>
<section>
<a id="section2"> </a>
<p>Some more content<p>
</section>
</div>
</body>
Note: In my personal experience, the ID could be just as effectively applied to the tag instead of a redundant and this still work ... I've only done it this way in this example because some users noted issues with targeting IDs higher up the DOM tree than this ... I couldn't personally recreate that problem, so hey, either way works!
Then style the wrapper element and body to behave correctly
body { position:relative; }
.wrapper { overflow:auto; position:absolute; top:0; height:100%; width:100%; }
Then the jQuery
$('.scroll-to-id').on('click', function(event) {
event.preventDefault();
var target = "#" + $(this).data('target');
$('.wrapper').animate({
scrollTop: $(target).offset().top
}, 1500);
});