I have script that is not working in my wordpress site, but it used to be working before I had my pc reset. I can't find the error in these lines, maybe the problem is another, don't really know. The only suggest is Eslint teminated with error:timeout from brackets debug... It used to work unless, I don't know if I modified it and ended up making some mistake, my knowledge is kinda obsolete since it's been a while and I'm refreshing...
jQuery(document).ready(function() {
// define variables
var navOffset, scrollPos = 0;
// add utility wrapper elements for positioning
jQuery(".blog-nav").wrap('<div class="nav-placeholder"></div>');
// function to run on page load and window resize
function stickyUtility() {
// only update navOffset if it is not currently using fixed position
if (jQuery(".blog-nav").hasClass("fixed")) {
navOffset = jQuery(".blog-nav").offset().top;
}
// apply matching height to nav wrapper div to avoid awkward content jumps
jQuery(".nav-placeholder").height(jQuery(".blog-nav").outerHeight());
} // end stickyUtility function
// run on page load
stickyUtility();
// run on window resize
jQuery(window).resize(function() {
stickyUtility();
});
// run on scroll event
jQuery(window).scroll(function() {
scrollPos = jQuery(window).scrollTop();
if (scrollPos >= navOffset) {
jQuery(".blog-nav").addClass("fixed");
} else {
jQuery(".blog-nav").removeClass("fixed");
}
});
});
.blog-nav {
width: 100%;
height: 30px;
background-color: #000000;
margin: 0;
padding: 0;
}
div.blog nav li {
padding-top: 6px;
}
nav.blog-nav li a:link,
nav.blog-nav li a:visited {
color: #FFF;
text-decoration: none;
list-style: none;
margin-left: 50px;
font-weight: bold;
}
div.blog a:visited,
div.blog a:link {
color: #000000;
}
.fixed {
position: fixed;
top: 0;
}
.space {
height: 300px;
}
<div class="blog" id="blog" name="blog">
<nav class="blog-nav">
<li>Notizie</li>
</nav>
<div class="space"></div>
</div>
I had same error with my jquery code in wordpress. code it works fine but when I upload site online stop working
First check your functions file in php and make sure that you include jquery in head
function my_enqueue_scripts() {wp_enqueue_script('jquery');}
make sure that jquery file required above every js file
I am trying to build a website with a horizontal scroll like this website k2.pl
Desc
i have made this code so far jquery animate and scroll to
// i am getting y and x axis and moving the whole page agains it
$('.scroll').animate( { scrollLeft: '+='+newScroll }
but what i made is that my script gets page X axis of website and move againts it but what i want is that when i hover on an element on the site it should scroll to the center like on this site k2.pl
can you guys suggest me some jquery plugin or that tell me how can improve it
If you check the website and move the mouse, you'll see that the element that you hover on doesn't really go to the center, the movement of the scroll is associated to the horizontal movement of the mouse and has nothing to do with hovering over the different list elements.
The idea is simple:
Have a container that occupies the whole width of the window and that has a overflow:hidden.
Inside that container have a second container with the same width as the list of elements.
Inside that container have a list of elements (or a series of inline elements) that occupy more than the width of the window.
When the mouse moves over the container, calculate the position of the mouse within the window, and scroll the container horizontally accordingly.
A basic version of it would be like this:
$(document).ready(function() {
$(".scroll").on("mousemove", function(e) {
var ww = $(window).width(); // window width
var uw = $(".scroll ul").width(); // ul width
var mp = e.clientX; // mouse position
var ms = uw - ww; // max scroll
var sc = - ms * mp / ww; // amount to be scrolled
$(".scroll > div").stop().animate({ left: sc +"px" }, 600, "easeOutCirc");
});
});
html, body {
margin:0;
padding:0;
border:0;
}
div.scroll {
width:100%;
height:400px;
overflow:hidden;
background:#f0f0f0;
position:relative;
}
div.scroll > div {
width:1400px;
position:absolute;
top:0;
left:0;
}
div.scroll > div > ul {
width:1400px;
margin:0;
padding:0;
}
div.scroll > div > ul > li {
display:inline-block;
float:left;
width:200px;
height:400px;
opacity:0.7;
transition:all 0.5s;
}
div.scroll > div > ul > li:hover {
opacity:1;
background:#6699cc;
}
div.scroll > div > ul > li:hover > span {
color:white;
background:black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<div class="scroll">
<div>
<ul>
<li><span>AAA</span></li>
<li><span>BBB</span></li>
<li><span>CCC</span></li>
<li><span>DDD</span></li>
<li><span>EEE</span></li>
<li><span>FFF</span></li>
<li><span>GGG</span></li>
</ul>
</div>
</div>
(Note: the code above may not work if the width of the window is larger than 1400px)
If you check the source code for k2.pl you'll see that they are using jQuery, jQuery UI, and Ariel Flesler's scrollTo plugin. You can see the code that controls the scrolling (in a different way to what I explained above) in the script.min.js file (search for mousemove.sapp).
As promised, here's my working solution. Alvaro's is great, but it uses the jQuery animate function which is a big no-no (it's about 10x slower than CSS transitions / the GSAP JavaScript animation library, for example), so I thought you might benefit from another implementation.
I personally like GSAP, which is super easy to pick up; that's why I've used it here. The rest is in native JS so you don't need all that library bloat:
var wrapper = document.getElementById("wrapper");
var tiles = document.getElementsByClassName("tile");
var tileWidth = tiles[0].getBoundingClientRect().width;
var containingWidth = tileWidth * tiles.length;
wrapper.addEventListener("mousemove", function(e){
var pos = (e.clientX / (wrapper.getBoundingClientRect().width)) * containingWidth - (tileWidth / 1.5);
TweenLite.to(wrapper, 1, { scrollLeft: pos, ease: Circ.easeOut })
});
html, body {
height: 100%;
overflow: hidden;
white-space: nowrap;
}
#wrapper {
height: 100%;
overflow-y: hidden;
overflow-x: auto;
}
.tile {
display: inline-block;
height: 100%;
width: 400px;
transition: background 0.2s ease-in-out;
}
.tile:hover {
background: transparent !important;
}
<div id="wrapper">
<div style="background: #6d8745" class="tile"></div>
<div style="background: #aa715a" class="tile"></div>
<div style="background: #a25fe3" class="tile"></div>
<div style="background: #8e84f5" class="tile"></div>
<div style="background: #259a5c" class="tile"></div>
<div style="background: #d5b67a" class="tile"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
The principles are essentially the same as Alvaro's. What you have to understand is that the width of the viewport will be a certain percentage of the width of the div / element which contains all of the "tiles" so, taking this into consideration, you have to calculate how to make them map at a 1:1 ratio. That calculation is represented by this line of code (the subtraction at the end is an offset):
var pos = (e.clientX / (wrapper.getBoundingClientRect().width)) * containingWidth - (tileWidth / 1.5);
Hope this helps!
Original codepen
I am trying to make dynamic HTML elements which would be resized via jQuery. Here is the procedure I've used:
HTML:
<div id="top">top</div>
<div id="left">left</div>
<div id="right">right</div>
<div id="bottom">bottom</div>
CSS:
html,
body {
margin:0;
padding:0;
height:100%;
background-color: #f5f7fa;
}
#top, #bottom, #left, #right {
position: absolute;
}
#top {
background-color: red;
}
#bottom {
background-color: blue;
}
#left {
background-color: orange;
}
#right {
background-color: green;
}
JAVASCRIPT - jQuery
$(function() {
function ResizeObjects() {
var margin = 10; // margin for LEFT and RIGHT panel
var window = $(this);
var body = $("body");
var top = $("#top");
var bottom = $("#bottom");
var left = $("#left");
var right = $("#right");
// top panel
top.css("top", 0);
top.width(body.width());
// bottom panel
bottom.css("top", body.height()-bottom.height());
bottom.width(body.width());
// left panel
left.css("top", top.height()+margin);
left.css("left", margin);
left.width( (body.width()/2)-(margin*1.5) );
left.height( body.height()-top.height()-bottom.height()-(2*margin) );
// right panel
right.css("top", top.height()+margin);
right.css("right", margin);
right.width( (body.width()/2)-(margin*1.5) );
right.height( body.height()-top.height()-bottom.height()-(2*margin) );
}
$(window).on("resize", function() {
ResizeObjects();
});
ResizeObjects();
});
It seems it works somehow but if you try this on other devices like tablets with Safari browser or you can try to resize it in Chrome, you will see incorrect resize actions, especially with BOTTOM panel.
This example is based on idea that BODY is VIEWPORT (i believe this is name for whole visible space in any browser). Maybe this idea is wrong.
Whole example can be found here: https://jsfiddle.net/Lyu1naqp/1/
Goal
To have the page navigation positioned lower on the page when initially loaded. So that it looks like pictured below.
Background
I created a navigational element that is using Headroom.js to control its position. The point of the library is that it moves the desired navigational item out of view when a user is scrolling down so that you can see more content. Then the item shows up when you scroll back up to make it convenient to click on a link if that is what you needed to do.
Current State
I have this current demo on codepen.
That navigational item is at the top of the page but on a lower z-index. So not initially visible.
when you scroll down the element is out of view.
But when you scroll up, it is where it needs to be
Code
HTML
<nav id="page-menu" class="link-header header--fixed slide slide--reset" role="banner">
<ul>
<li>Products</li>
<li>Features</li>
<li>Testimonials</li>
<li>Cases</li>
</ul>
</nav>
CSS
#page-menu {
background-color: #BA222B;
list-style-type: none;
width: 100%;
z-index:10;
}
#page-menu ul {
list-style-type: none;
margin: 0;
position: absolute;
bottom: 5px;
right: 10px;
}
#page-menu ul li {
display: inline-block;
margin-left: 10px;
}
#page-menu ul li a {
text-decoration: none;
color: #fff;
}
.link-header {
background-color:#292f36;
height: 100px;
}
.header--fixed {
position:fixed;
z-index:10;
right:0;
left:0;
top:0px;
}
jQuery
(function() {
new Headroom(document.querySelector("#page-menu"), {
tolerance: 5,
offset : 150,
classes: {
initial: "slide",
pinned: "slide--reset",
unpinned: "slide--up"
}
}).init();
}());
Full demo on codepen.
Goal :
From what you are describing, you want the read navigation to appear as such on page load:
And move with the gray bar, but and down, as the user scrolls, until it cutoff point reaches the bottom of the gray bar. Then you want things to kick in, and have the red bar slide up and out of view, and then up and down depending on scroll. You want the transition to be smooth.
Method:
The thing to keep in mind for a smooth transition is that you have two states: A top state and a bottom state. You have to design both, you have to figure out the exact height to change over, and you have to make sure that they will be identical at that spot, so appear seamless.
Top State:
We don't need any sort of extra positioning here. We want it to be static in fact, as odd as that might sound.
Bottom State:
We want fixed positioning here. Since we want the changeover to occur right when the red bar touches the top of the window, your CSS in fixed-header is perfect already.
Changeover Height:
The header and the gray nav bar combined are 180px, so that number will be our change over.
Code:
1. Statechange
Lets work backwards and take the state change first. You will need to change from 150px to 180px in a lot of places. For example, your JS code:
Existing JS:
if ($(window).scrollTop() >= 150) {
...
(function() {
new Headroom(document.querySelector("#page-menu"), {
tolerance: 5,
offset : 150,
New JS:
if ($(window).scrollTop() >= 180) {
...
(function() {
new Headroom(document.querySelector("#page-menu"), {
tolerance: 5,
offset : 180,
And your header will need an updated height, or a removal of height entirely.
Existing CSS:
header {
height:150px;
position: relative;
z-index:30;
}
New CSS:
header {
position: relative;
z-index:30;
}
2. Top State
The big thing here messing you up is that for some reason the library you are using is applying .header--fixed and link-header on page load. I don't know how to prevent this, but we can just neutralize is by removing them from your CSS.
Remove This CSS:
.link-header {
background-color:#292f36;
height: 100px;
}
.header--fixed {
position:fixed;
z-index:10;
right:0;
left:0;
top:0px;
}
Second, we need to tweak the ul inside your red nav.
Existing CSS:
#page-menu ul {
list-style-type: none;
margin: 0;
position: absolute;
bottom: 5px;
right: 10px;
}
New CSS:
#page-menu ul {
list-style-type: none;
margin: 0 auto;
padding:0;
width:960px;
max-width:100%;
text-align:right;
}
3. Bottom State
Everything works really well here aleady, except that the fixed-header class is getting added to the gray nav as well. We need to tweak our jQuery selector bit.
Existing JS:
if ($(window).scrollTop() >= 180) {
$('nav#page-menu').addClass('fixed-header');
}
else {
$('nav#page-menu').removeClass('fixed-header');
}
NewJS:
if ($(window).scrollTop() >= 180) {
$('header nav').addClass('fixed-header');
}
else {
$('header nav').removeClass('fixed-header');
}
4. Misc Cleanup
Everything looks really good here, except that the lis inside our two navs don't line up. We need to fix some margin-right to bring them into line.
Existing CSS:
#page-menu ul li {
display: inline-block;
margin-left: 10px;
}
New CSS:
#page-menu ul li {
display: inline-block;
margin-left: 10px;
margin-right: 10px;
}
Finally, I noticed that there's a missing closing bracket in your HTML, in the gray nav. It's not hurting much, but it could:
<nav>
<ul>
<li>Dentists</li>
<li>Labs</li>
<li>Patients</li>
<ul> <--- ( Should be </ul> )
</nav>
End Result:
http://codepen.io/anon/pen/qIrhx
I created a jQuery popup by following an online tutorial (http://uposonghar.com/popup.html).
Due to my low knowledge on jQuery I am not able to make it work as of my requirements.
My problem:
I want to disable scroll of webpage while popup is active.
Background fade color of popup while active is not working on full webpage.
CSS:
body {
background: #999;
}
#ac-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,.6);
z-index: 1001;
}
#popup{
width: 555px;
height: 375px;
background: #FFFFFF;
border: 5px solid #000;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
box-shadow: #64686e 0px 0px 3px 3px;
-moz-box-shadow: #64686e 0px 0px 3px 3px;
-webkit-box-shadow: #64686e 0px 0px 3px 3px;
position: relative;
top: 150px; left: 375px;
}
JavaScript:
<script type="text/javascript">
function PopUp(){
document.getElementById('ac-wrapper').style.display="none";
}
</script>
HTML:
<div id="ac-wrapper">
<div id="popup">
<center>
<p>Popup Content Here</p>
<input type="submit" name="submit" value="Submit" onClick="PopUp()" />
</center>
</div>
</div>
<p>Page Content Here</p>
A simple answer, which you could use and would not require you to stop the scroll event would be to set the position of your #ac-wrapper fixed.
e.g.
#ac-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,.6);
z-index: 1001;
}
this will keep the container of the popup always visible (aligned top - left) but would still allow scrolling.
But scrolling the page with a popup open is BAD!!! (almost always anyway)
Reason you would not want to allow scrolling though is because if your popup isn't fullscreen or is semi transparent, users will see the content scroll behind the popup. In addition to that, when they close the popup they will now be in a different position on the page.
A solution is that, when you bind a click event in javascript to display this popup, to also add a class to the body with essentially these rules:
.my-body-noscroll-class {
overflow: hidden;
}
Then, when closing the popup by triggering some action or dismissing it with a click, you simply remove the class again, allowing scroll after the popup has closed.
If the user then scrolls while the popup is open, the document will not scroll. When the user closes the popup, scrolling will become available again and the user can continue where they left off :)
To disable scrollbar:
$('body').css('overflow', 'hidden');
This will hide the scrollbar
Background-fade-thing:
I created my own popup-dialog-widget that has a background too. I used the following CSS:
div.modal{
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 9998;
background-color: #000;
display: none;
filter: alpha(opacity=25); /* internet explorer */
-khtml-opacity: 0.25; /* khtml, old safari */
-moz-opacity: 0.25; /* mozilla, netscape */
opacity: 0.25; /* fx, safari, opera */
}
I had a similar problem; wanting to disable vertical scrolling while a "popup" div was displayed.
Changing the overflow property of the body does work, but also mess with the document's width.
I opted jquery to solve this using and used a placeholder for the scrollbar.
This was done without binding to the scroll event, ergo this doesn't change your scrollbar position or cause flickering :)
HTML:
<div id="scrollPlaceHolder"></div>
CSS:
body,html
{
height:100%; /*otherwise won't work*/
}
#scrollPlaceHolder
{
height:100%;
width:0px;
float:right;
display: inline;
top:0;
right: 0;
position: fixed;
background-color: #eee;
z-index: 100;
}
Jquery:
function DisableScrollbar()
{
// exit if page can't scroll
if($(document).height() == $('body').height()) return;
var old_width = $(document).width();
var new_width = old_width;
// ID's \ class to change
var items_to_change = "#Banner, #Footer, #Content";
$('body').css('overflow-y','hidden');
// get new width
new_width = $(document).width()
// update width of items to their old one(one with the scrollbar visible)
$(items_to_change).width(old_width);
// make the placeholder the same width the scrollbar was
$("#ScrollbarPlaceholder").show().width(new_width-old_width);
// and float the items to the other side.
$(items_to_change).css("float", "left");
}
function EnableScrollbar()
{
// exit if page can't scroll
if ($(document).height() == $('body').height()) return;
// remove the placeholder, then bring back the scrollbar
$("#ScrollbarPlaceholder").fadeOut(function(){
$('body').css('overflow-y','auto');
});
}
Hope this helps.
If simple switching of body's 'overflow-y' is breaking your page's scroll position, try to use these 2 functions (jQuery):
// Run this function when you open your popup:
var disableBodyScroll = function(){
window.body_scroll_pos = $(window).scrollTop(); // write page scroll position in a global variable
$('body').css('overflow-y','hidden');
}
// Run this function when you close your popup:
var enableBodyScroll = function(){
$('body').css('overflow-y','scroll');
$(window).scrollTop(window.body_scroll_pos); // restore page scroll position from the global variable
}
Use below code for disabling and enabling scroll bar.
Scroll = (
function(){
var x,y;
function hndlr(){
window.scrollTo(x,y);
//return;
}
return {
disable : function(x1,y1){
x = x1;
y = y1;
if(window.addEventListener){
window.addEventListener("scroll",hndlr);
}
else{
window.attachEvent("onscroll", hndlr);
}
},
enable: function(){
if(window.removeEventListener){
window.removeEventListener("scroll",hndlr);
}
else{
window.detachEvent("onscroll", hndlr);
}
}
}
})();
//for disabled scroll bar.
Scroll.disable(0,document.body.scrollTop);
//for enabled scroll bar.
Scroll.enable();
https://jsfiddle.net/satishdodia/L9vfhdwq/1/
html:-
Open popup
Popup
pop open scroll stop now...when i will click on close automatically scroll running.
close
**css:-**
#popup{
position: fixed;
background: rgba(0,0,0,.8);
display: none;
top: 20px;
left: 50px;
width: 300px;
height: 200px;
border: 1px solid #000;
border-radius: 5px;
padding: 5px;
color: #fff;
}
**jquery**:-
<script type="text/javascript">
$("#open_popup").click(function(){
$("#popup").css("display", "block");
$('body').css('overflow', 'hidden');
});
$("#close_popup").click(function(){
$("#popup").css("display", "none");
$('body').css('overflow', 'scroll');
});
</script>
I had the same problem and found a way to get rid of it, you just have to stop the propagation on touchmove on your element that pops up. For me, it was fullscreen menu that appeared on the screen and you couldn't scroll, now you can.
$(document).on("touchmove","#menu-left-toggle",function(e){
e.stopPropagation();
});
This solution works for me.
HTML:
<div id="payu-modal" class="modal-payu">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
CSS:
.modal-payu {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
bottom: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
JS:
<script>
var btn = document.getElementById("button_1");
btn.onclick = function() {
modal.style.display = "block";
$('html').css('overflow', 'hidden');
}
var span = document.getElementsByClassName("close")[0];
var modal = document.getElementById('payu-modal');
window.onclick = function(event) {
if (event.target != modal) {
}else{
modal.style.display = "none";
$('html').css('overflow', 'scroll');
}
}
span.onclick = function() {
modal.style.display = "none";
$('html').css('overflow', 'scroll');
}
</script>
I ran into the problem and tried several solutions,
here is the article that solved my problem (https://css-tricks.com/prevent-page-scrolling-when-a-modal-is-open/) and it is quite simple!
It uses the 'fixed body' solution, which is quite common to find in lots of posts.
The problem with this solution is, when the popup is closed, the body will scroll back to the top.
But the article points out: by manipulating the CSS top and position attributes while using the solution, we can recover the scroll position.
Another issue of the solution is, you can't apply the solution with the multiple popup scenario.
So I added a variable to store the count of the popup, just to make sure the program won't trigger the initiating process nor the reset process at the wrong timing.
Here is the final solution I get:
// freeze or free the scrolling of the body:
const objectCountRef = { current: 0 }
function freezeBodyScroll () {
if (objectCountRef.current === 0) { // trigger the init process when there is no other popup exist
document.body.style.top = `-${window.scrollY}px`
document.body.style.position = 'fixed'
}
objectCountRef.current += 1
}
function freeBodyScroll () {
objectCountRef.current -= 1
if (objectCountRef.current === 0) { // trigger the reset process when all the popup are closed
const scrollY = document.body.style.top
document.body.style.position = ''
document.body.style.top = ''
window.scrollTo(0, parseInt(scrollY || '0') * -1)
}
}
You can also see the demo on my Codepen: https://codepen.io/tabsteveyang/pen/WNpbvyb
Edit
More about the 'fixed body' solution
The approach is mainly about setting the CSS position attribute of the body element into 'fixed' to make it unscrollable.
No matter how far it has been scrolled, when the body is fixed, it will scroll back to the top, which is the behavior that I don't expect to see. (Imagine the user is browsing a long content and almost scrolls to the bottom of the page, suddenly a popup shows up and make the page scroll right back to the top, that's a bad user experience)
The solution from the article
Base on the 'fixed body' approach, additionally, the solution sets the CSS top of the body as the value of '-window.scrollY px' to make the body looks like it stays in the current scrolling position while it is fixed.
Furthermore, the solution uses the CSS top of the body as a temporary reference, so that we can retrieve the scrolling position by the attribute when we want to make the body scrollable again. (Notice you have to multiple the position you get to -1 to make it positive)