Heres basically what the code looks like, it should run if pasted in sublime, what i'm trying to do is get the div to show when the page is loaded and then hide on scroll but when the button is clicked it should show wherever you are on the page. The codes a bit rough but its just a test page
$(window).scroll(function() {
if ($(this).scrollTop()>0)
{
$('.fade').fadeOut();
}
else
{
$('.fade').fadeIn();
}
});
$(function(){
$(".box").click(function(){
$(this).find(".fade").fadeIn();
}
,function(){
$(this).find(".fade").fadeOut();
}
);
});
window.onscroll = function()
{
var left = document.getElementById("left");
if (left.scrollTop < 60 || self.pageYOffset < 60) {
left.style.position = 'fixed';
left.style.top = '60px';
} else if (left.scrollTop > 60 || self.pageYOffset > 60) {
left.style.position = 'absolute';
left.style.margin-top = '200px';
}
}
body {
height: 2000px;
}
.fade {
height: 300px;
width: 300px;
background-color: #d15757;
color: #fff;
padding: 10px;
}
.box{color: red;}
#left{
float: left;
width: 20%;
height: 200px;
background: yellow;
position: fixed;
top: 0;
left: 150px;
}
<div class="box">
<div class="fade" id="left">
show div / hide on click (NOT HOVER)
</div>
<br><br><br><br><br><br><br><br><br><br><br><br>
<div style="margin-left: 90% !important;">
<button style=" position: fixed;
/* margin-right: -40% !important; */
margin-top: 0%;
background-color: red;
color: #fff;
padding: 10px 10px;
display: block;
width: 54%;
float: right;
top: 0;">show div again</button></div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'>
This could work. If box is clicked, check if .fade element is already visible. If it is, then hide it, if not, show it.
$(".box").click(function(){
if($(".fade", this).is(":visible"))
{
$(".fade", this).fadeOut();
}
else
{
$(".fade", this).fadeIn();
}
});
You can use toggle since you need to alternate fadeIn and fadeOut on click
Replace hover
$(function(){
$(".box").hover(function(){
$(this).find(".fade").fadeIn();
},function(){
$(this).find(".fade").fadeOut();
}
);
});
With toggle
$(function(){
$(".box").toggle(function(){
$(this).find(".fade").fadeIn();
},function(){
$(this).find(".fade").fadeOut();
}
);
});
a quick look at the doc would have saved you headaches: http://api.jquery.com/click
It`s not working for reason - you create buttons dynamically because of that you need to call them with .live() method if you use jquery 1.7
but this method is deprecated (you can see the list of all deprecated method here) in newer version. if you want to use jquery 1.10 or above you need to call your buttons in this way:
$(document).on('click', 'selector', function(){
// Your Code
});
Your code will be something like this.
$(document).on('click', '.box', function(){
$(this).find(".fade").fadeIn();
},function(){
$(this).find(".fade").fadeOut();
});
Related
I've noticed on the mobile version (iOS) of my website that the main navigation requires links to be tapped twice for the page to redirect. After removing various styles/bits of code I found the cause of the problem, it's my Javascript for a 'sliding line' hover effect.
My basic understanding would be that as the script is still running on mobile, when it's not really needed, it means the navigation is running/expecting a hover effect and once that's run you can then click a link as you intend?
The script works perfect on desktop, so I don't want to change any of the functionality but is there something I can add to prevent this bug on mobile devices? Alternatively, would a javascript 'media query' type thing, stopping the script from running below 1000px be a better solution? If so what would be the best way to implement that?
Thank in advance!
CodePen: https://codepen.io/moy/pen/pZdjMX
$(function() {
var $el,
leftPos,
newWidth,
$mainNav = $(".site-nav__list");
$mainNav.append("<div class='site-nav__line'></div>");
var $magicLine = $(".site-nav__line"),
$currentMenu = $(".current-menu-item");
$magicLine
.width($currentMenu.length ? $currentMenu.width() : 0)
.css("left", $currentMenu.length ? $currentMenu.find("a").position().left : 0)
.data("origLeft", $magicLine.position().left)
.data("origWidth", $magicLine.width());
var hoverOut;
$(".site-nav__list li a").hover(function() {
clearTimeout(hoverOut);
$el = $(this);
leftPos = $el.position().left;
newWidth = $el.parent().width();
if (!$magicLine.width()) {
$magicLine.stop().hide().css({
left: leftPos,
width: newWidth
}).fadeIn(100);
} else {
$magicLine.stop().animate({
opacity: 1,
left: leftPos,
width: newWidth
});
}
},
function() {
hoverOut = setTimeout(function() {
if (!$currentMenu.length) {
$magicLine.fadeOut(100, function() {
$magicLine.css({
left: $magicLine.data("origLeft"),
width: $magicLine.data("origWidth")
});
});
} else {
$magicLine.stop().animate({
left: $magicLine.data("origLeft"),
width: $magicLine.data("origWidth")
});
}
}, 100);
}
);
});
/* Header */
.page-head {
background: white;
border-top: 2px solid #ddd;
box-sizing: border-box;
overflow: hidden;
padding: 0 30px;
position: relative;
width: 100%;
}
.page-head__logo {
background-image: none;
float: left;
padding: 0;
text-shadow: none;
width: 200px;
}
/* Nav */
.site-nav {
display: block;
float: right;
text-align: center;
width: auto;
}
.site-nav__list {
list-style: none;
margin: 0;
padding: 0;
position: relative;
top: auto;
left: auto;
width: auto;
}
.site-nav__list li {
background: none;
display: block;
float: left;
margin: 0;
padding-left: 0;
text-transform: uppercase;
}
.site-nav__list a {
box-sizing: border-box;
display: block;
font-weight: 900;
padding: 30px 15px;
transition: color .15s;
text-shadow: none;
}
.site-nav__list a {
color: red;
}
/* Underline */
.site-nav__line {
background: red;
content: "";
display: block;
height: 2px;
position: absolute;
top: -2px;
left: 0;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<header class="page-head">
Logo Here
<nav class="site-nav ">
<ul class="site-nav__list">
<li class="site-nav__item ">About</li>
<li class="site-nav__item">Looooonger Title</li>
<li class="site-nav__item">Company</li>
<li class="site-nav__item">About</li>
<li class="site-nav__item">Login</li>
<li class="site-nav__item">Apply</li>
</ul>
</nav>
</header>
</body>
if your problem is you to double click it before redirecting to its page, Try thi
$('.site-nav__list a').click(function(){
$(this).click();
});
the function is when you click the navigation the script will click it again,
If you're sure that the cause of the problem is running that script on mobile screens, you can call sliding script only on desktops with this code:
if ( $(window).width() > 739) {
//Desktop scripts
}
else {
//mobile scripts
}
You can change the screen width of devices you want to script work on them by changing 739. After that your script will run only on screens larger that 739px or what you've choose.
Update
If you want to everything works correct after resizing, You should do a little trick.
Personally, I use this method because it's the only way that makes you sure about bugs and problems. The trick is reloading the page after resizing.
It's not costly in many cases because most of the things cashed and don't need to redownloading. There are lots of methods to do that, but I use the below one because it works good and is simple and short:
window.onresize = function () {
location = location;
}
You just need to add this lines at the end of your script file. After resizing, everything will work well again.
How it works?
When you resize the window, a javascript event will emit. What we done in the last code is overriding the event listener of that event. So when the user resize the window, the location = location; code will execute.
What this line means? the location object is a property of window object and keeping information about current window url. When you change the location of a window, browser page will reload to getting the new window of the new location (more info about location).
What we done here is assigning current location to the location. So browser thinks we had a redirect request and reloads the page. But because the new location is the same object as previous one, the page will reload instead of redirecting to somewhere else.
Okay, so I'm basically trying to achieve that if you click div1, the width of this specific div changes to 50%, and all the other divs their widths change to, let say 2%. (see jsfiddle for more clarity)
I've tried to do this by giving them a separate class, so the div being click is Online, the rest of Offline. I thought it might work if I then said something like; if .. hasClass .. do this.
In the end, I've managed to indeed scale the div on click to 50%, but sadly enough I made quite a mess of the rest. I'll include the code, and I hope someone can explain to me how I should proceed. I also thought of an Array but did not know how to move forward with this.
https://jsfiddle.net/6cjmshrq/
1
$(".sliding-panel1").click(function(){
$(".sliding-pane2").addClass("Active");
$(".sliding-pane2").addClass("Offline");
$(".sliding-pane3").addClass("Offline");
$(".sliding-pane4").addClass("Offline");
$(".sliding-pane5").addClass("Offline");
$(".sliding-pane6").addClass("Offline");
$(".sliding-pane7").addClass("Offline");
$(".sliding-pane8").addClass("Offline");
$(".sliding-pane9").addClass("Offline");
$(".sliding-pane10").addClass("Offline");
$(".sliding-pane11").addClass("Offline");
});
2
$(".sliding-panel1").click(function(){
if ( $(this).hasClass("Active") ) {
$(this).animate({
width: '9%',
height: '100%'
});
} else {
$(this).animate({
width: '50%',
height: '100%'
});
}
$(this).toggleClass("Active");
});
3
$(function(){
$('.sliding-panel1').click(function(){
$(".container").children().each( function(){
if (!$(this).hasClass('Active') ){
$(this).animate({
width: '9%'
})
else {
$(this).animate({
width: '50%'
})
};
4
var elements = document.getElementsByClassName('Offline');
for (var i = 0; i < elements.length; i++) {
elements[i].style.widht='2%';
elements[i].style.height='100%';
}
5
$(".sliding-panel1").click(function(){
$("#selectedwhip").addClass("active");
});
$(function() {
if ($("#selectedwhip").hasClass("active")) {
console.log('active');
}
else {
console.log('unactive');
}
});
You can minimize the css your css isnt dry , just use a single default class for the default state and add a class with name .Active in css with the transition property and you dont have to write that much jquery code too to control the width and height, instead you add or remove the .Active class see a demo below if that is how you want it
$(".container div").on('click', function(e) {
var $this = $(this);
$(".container div").filter(function() {
return !$(this).is($this);
}).removeClass('Active').addClass('Offline');
$this.removeClass('Offline').addClass('Active');
});
*,
*:before,
*:after {
margin: 0;
box-sizing: border-box;
}
body,
html {
height: 100%;
}
.container {
position: relative;
width: 100%;
height: 100%;
background-color: grey;
}
.panels {
width: 9%;
float: left;
height: 100vh;
background-color: red;
border: 1px black solid;
}
.Active {
width: 50%;
transition: 1s linear;
}
.Offline {
width: 5%;
transition: 1s linear;
}
<div class="container">
<div class="panels">1
</div>
<div class="panels">
</div>
<div class="panels">
</div>
<div class="panels">
</div>
<div class="panels">
</div>
<div class="panels">
</div>
<div class="panels">
</div>
<div class="panels">
</div>
<div class="panels">
</div>
<div class="panels">
</div>
<div class="panels">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Maybe this is:
$("[class^='sliding-panel']" ).click(function(){ //selector part of class name
$("[class^='sliding-panel']" ).addClass("Offline").removeClass("Active"); //for all
$(this).addClass("Active").removeClass("Offline"); //for this element
});
Slight adjustment of Muhammad Omer Aslam's answer to account for shrinking the un-clicked divs instead of pushing them off screen (if I'm seeing it right):
script:
$(".container div").on('click', function() {
$(".container div").removeClass('Active');
$(".container div").addClass('Inactive');
$(this).removeClass('Inactive');
$(this).addClass('Active');
});
append to his css:
.Inactive {
width: 2%;
transition: 1s linear;
}
I have read a lot of the questions on here but can't find one that fixes this. I have programmed a div to follow my cursor. I only want it to appear when the cursor is over #backgroundiv. I have got it working but it sometimes randomly flickers on chrome and disappears entirely on firefox. Even more randomly is it sometimes appears to work and then starts flickering. I have tried a variety of things from hover to mouseenter/mouseover but nothing seems to work.
What I want is for #newdot to appear when the cursor is over #backgroundiv and then follow the cursor around the div. Any help would be much appreciated.
//hide dot when leaves the page
$(document).ready(function() {
$("#backgroundiv").hover(function() {
$("#newdot").removeClass("hide");
}, function() {
$("#newdot").addClass("hide");
});
});
//div follows the cursor
$("#backgroundiv").on('mousemove', function(e) {
//below centres the div
var newdotwidth = $("#newdot").width() / 2;
$('#newdot').css({
left: e.pageX - newdotwidth,
top: e.pageY - newdotwidth
});
});
//tried below too but it doesn't work
/*$(document).ready(function(){
$("#backgroundiv").mouseenter(function(){
$("#newdot").removeClass("hide");
});
$("#backgroundiv").mouseout(function(){
$("#newdot").addClass("hide");
});
}); */
#backgroundiv {
width: 400px;
height: 400px;
background-color: blue;
z-index: 1;
}
#newdot {
width: 40px;
height: 40px;
background-color: red;
position: absolute;
z-index: 2;
}
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="newdot"></div>
<div id="backgroundiv"></div>
There is not issue but a logical behavior, when you hover on the blue div you trigger mouseenter so you remove the class and you see the red one BUT when you hover the red one you trigger mouseleave from the blue div thus you add the class and you hide the red one. Now the red is hidden you trigger again the mouseenter on the blue div and you remove the class again and the red div is shown, and so on ... this is the flicker.
To avoid this you can consider the hover on the red box to make the red box appear on its hover when you lose the hover from the blue one.
$(document).ready(function() {
$("#backgroundiv").hover(function() {
$("#newdot").removeClass("hide");
}, function() {
$("#newdot").addClass("hide");
});
});
//div follows the cursor
$("#backgroundiv").on('mousemove', function(e) {
//below centres the div
var newdotwidth = $("#newdot").width() / 2;
$('#newdot').css({
left: e.pageX - newdotwidth,
top: e.pageY - newdotwidth
});
});
#backgroundiv {
width: 400px;
height: 400px;
background-color: blue;
z-index: 1;
}
#newdot {
width: 40px;
height: 40px;
background-color: red;
position: absolute;
z-index: 2;
}
.hide {
display: none;
}
/* Added this code */
#newdot:hover {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="newdot">
</div>
<div id="backgroundiv">
</div>
I need to change an image of one div while hovering over another. So far i have this
$('#button').on({
'hover': function(){
$('#ekranasStatic').attr('src', 'http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/ekranas_zpsczoquizc.png');
}
});
DEMO
But it doesn't work..
EDIT While it works in fiddle, the solution does not work in my local file.
Hover is deperecated with latest versions of jQuery. it is divided into two events mouseenter and mouserleave. use those event it will be helpful
As of 1.9, the event name string "hover" is no longer supported as a
synonym for "mouseenter mouseleave". This allows applications to
attach and trigger a custom "hover" event. Changing existing code is a
simple find/replace, and the "hover" pseudo-event is also supported in
the jQuery Migrate plugin to simplify migration. Reference
$('#button').on({
'mouseenter': function(){
$('#ekranasStatic').attr('src', 'http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/ekranas_zpsczoquizc.png');
}
});
$('#button').on({
'mouseleave': function(){
$('#ekranasStatic').attr('src', 'http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/some_other.png');
}
});
If you still want to use hover events then there is direct hover function provided by jQuery, with reference
$( "td" ).hover(
function() {
$('#ekranasStatic').attr('src', 'http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/ekranas_zpsczoquizc.png');
}, function() {
// change to default on hover out
}
);
Looks like you need to change it on mouseover and reset on mouseout. If you use data-* attribute it will be easier.
$('#button').hover(function() {
var img = $('#ekranasStatic').data('toggle-src');
$('#ekranasStatic').attr('src', img);
}, function() {
var img = $('#ekranasStatic').data('original-src');
$('#ekranasStatic').attr('src', img);
});
.img {
/*** TURI BUT 850 PX **/
position: absolute;
margin-left: 520px;
top: 110px;
z-index: 99;
}
#button {
width: 50px;
height: 70px;
display: block;
position: absolute;
top: 296px;
left: 1120px;
background: url("http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/knopkes_zpsp3qr4xyn.png") no-repeat;
z-index: 2200;
cursor: pointer;
}
#button:focus {
outline: none;
}
#button:hover {
animation: knopke 0.1s steps(2);
animation-fill-mode: forwards;
background-position: 0 0;
}
#keyframes knopke {
to {
background-position: -100px;
opacity: 1;
}
}
#ekranasStatic {
width: 735px;
height: 602px;
display: block;
position: absolute;
top: 120px;
left: 375px;
z-index: 10000000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<img class="img" src="http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/galerija3_zpszlnkhebp.png">
<div id="button"></div>
<div id="ekranai">
<img id="ekranasStatic" src="http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/ekranasStatic_zpswrnrw7f8.png" data-original-src="http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/ekranasStatic_zpswrnrw7f8.png" data-toggle-src="http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/ekranas_zpsczoquizc.png"
/>
</div>
Updated Fiddle
change this
$('#button').on({
'hover': function(){
to :
$('#button').hover({ function(){ });
try this :
$('#button').on('hover', function () {
$('#ekranasStatic').attr('src', 'http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/ekranas_zpsczoquizc.png');
}
);
Js Fiddle Updated
So I am having 2 issues here and maybe this is just a poor execution in general so please point me in the right direction.
1.) Regardless of how many black boxes there are the last one always works correctly, meaning I click the black box and it opens then a red box appears, I can close the box by clicking the dark area surrounding the red box or the red box itself. The issue comes when I click any boxes before the last box, it opens as expected but when I try to close it by clicking the red box it opens another instance of the dark background, I don't want that to happen.
2.) So I think the deeper issue is when I click a black box it is adding the class "fart" to ALL .testthree divs instead of just the one for the area I am clicking AND when I click the red box it is also adding the class "open" to all of the other test divs.
So my question is, Is there a way to contain the classes that are added ONLY to the initial place that I click? What I want to happen is:
I click workImg, test gets the class of open, and testthree gets the class of fart, ONLY for the workImg that i click on. Then when I click anywhere it all closes nicely.
Link to fiddle:
http://jsfiddle.net/dkarasinski/L6gLLyko/
HTML:
<div class="workCont">
<div class="workBlock">
<div class="workImg">
<div class="test one">
<div class="testthree"></div>
</div>
<img src="/assets/images/piece1.jpg" />
</div>
<div class="workName">Project</div>
</div>
<div class="workBlock">
<div class="workImg">
<div class="test one">
<div class="testthree"></div>
</div>
<img src="/assets/images/piece1.jpg" />
</div>
<div class="workName">Project</div>
</div>
</div>
CSS:
.workImg {
background:#151515;
width:330px;
height:201px;
display:inline-block;
position: relative;
}
.test {
position: fixed;
top: 50%;
left: 50%;
z-index:100;
width: 0;
height: 0;
-webkit-transition-duration: 300ms;
-webkit-transition-property: all;
-webkit-transition-timing-function: ease-in-out;
text-align: center;
background: white;
color: white;
font-family: sans-serif; /* Just 'cos */
}
.test.open {
top: 0;
left: 0;
width: 100%;
height: 100%;
position:fixed;
color:black;
background-color: rgba(0, 0, 0, 0.8);
}
.testthree {
width:0;
height:0;
background-color: red;
margin:auto;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.testthree.fart {
width:50%;
height:300px;
}
.testthree.close {
display:none;
}
.workName {
text-align:center;
margin-top:17px;
}
JQuery / Javascript:
$(document).ready(function(){
$(".workImg").click(function() {
$(this).find(".test").toggleClass("open");
if ($(this).find(".test").hasClass("one")) {
if($('.testthree').hasClass("fart")) {
$(".testthree").removeClass("fart");
}
else {
setTimeout(function(){
$( ".testthree" ).addClass( "fart" );
}, 500);
}
}
});
});
Replace all your code in else block with this:
var scope=$(this);
setTimeout(function(){
scope.find('.testthree').addClass('fart');
},500);
You needed a scope to work within and not apply fart class to all of the .testthree elements. Hope you find it useful.
Update: Your complete code may look like:
$(document).ready(function () {
$(".workImg").click(function () {
var scope = $(this);
var test = scope.find('.test');
var testthree = scope.find('.testthree');
test.toggleClass('open');
if (test.hasClass('one')) {
if (testthree.hasClass('fart')) {
testthree.removeClass('fart');
} else {
setTimeout(function () {
testthree.addClass('fart');
}, 500);
}
}
});
});
Hope this helps.
Why don't you just ignore the whole fart and close classes.
And make .testthree invisible by default..
.testthree {
width:50%;
height:300px;
background-color: red;
margin:auto;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display:none;
}
Then just do...
$(document).ready(function(){
$(".workImg").click(function() {
var test = $(this).find(".test");
test.toggleClass("open");
setTimeout(function(){
test.find(".testthree").toggle();
},100);
});
});
JSFIDDLE HERE
Try below code
$(document).ready(function(){
$(".workImg").click(function() {
$(this).find(".test").toggleClass("open");
if ($(this).find(".test").hasClass("one")) {
if($(this).find('.testthree').hasClass("fart")) {
$(this).find(".testthree").removeClass("fart");
}
else {
setTimeout(function(){
$(this).find( ".testthree" ).addClass( "fart" );
}, 500);
}
}
});
});