I'm making a personal website where pages are divided into 2. if you click on the left, the left part expands to the right and vice versa.
After the click action a button can supposedly reset the whole thing. It works great in this JSFiddle : http://jsfiddle.net/davidThomas/CFNUJ/1/
but I can't replicate it (http://guillaumeb.com/jsfiddle/split.html)
The "Show all" button does nothing...
Also I noticed that more recent versions of JQuery break the whole thing so I make use of v 1.x, like on the original example.
My JS skills are quite limited. Any help is appreciated
Here is the original code:
$('#left-bg, #right-bg').click(
function(){
$(this).animate({'width': '100%'},600).siblings().animate({'width':'0'},600);
$('<button class="show">Show all</button>')
.appendTo('#wrapper');
});
$('.show').live('click',
function(){
$('#left-bg').animate(
{
'width': '50%'
},600);
$('#right-bg').animate(
{
'width': '50%'
},600);
$(this).remove();
});
#left-bg {
position: absolute;
top: 0;
left: 0;
bottom: 0;
background-color: #000;
color: #fff;
width: 50%;
margin: 0;
}
#right-bg {
position: absolute;
right: 0;
bottom: 0;
top: 0;
background-color: #fff;
color: 000;
width: 50%;
margin: 0;
}
.show {
position: absolute;
bottom: 0;
left: 50%;
margin-left: -2.5em;
width: 5em;
}
<div id="wrapper">
<div id="left-bg">
<p>Left stuff</p>
</div>
<div id="right-bg">
<p>Right stuff</p>
</div>
</div>
<div id="wrapper">
<div id="left-bg">
<p>Left stuff</p>
</div>
<div id="right-bg">
<p>Right stuff</p>
</div>
</div>
Add JQuery library reference in your page
Update the function as following:
$(function(){
$('#left-bg, #right-bg').click(
function(){
$(this).animate({'width': '100%'},600).siblings().animate({'width':'0'},600);
$('<button class="show">Show all</button>')
.appendTo('#wrapper');
});
$(document).on('click','.show',
function(){
$('#left-bg').animate(
{
'width': '50%'
},600);
$('#right-bg').animate(
{
'width': '50%'
},600);
$(this).remove();
});
});
try this one may it works
$('.show').on('click',function(){
or
$(document).on('click','.show',function(){
because jQuery .live() has been removed in version 1.9 onwards.
The .on() method attaches event handlers to the currently selected set of elements in the jQuery object. As of jQuery 1.7, the .on() method provides all functionality required for attaching event handlers. For help in converting from older jQuery event methods, see .bind(), .delegate(), and .live(). To remove events bound with .on(), see .off(). To attach an event that runs only once and then removes itself, see .one()
thanks a lot for getting back to me, I do appreciate your help.
In the end I decided to do this in CSS with a click to trick the action via a very small JS.
I borrowed the code fomr here
https://codepen.io/thetallweeks/pen/boinE
<div class="box transform">
</div>
<input type="button" id="button" value="Click Me"></input>
================
.box {
background-color: #218D9B;
height: 100px;
width: 100px;
}
.transform {
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
-ms-transition: all 2s ease;
transition: all 2s ease;
}
.transform-active {
background-color: #45CEE0;
height: 200px;
width: 200px;
}
================
$("#button").click(function() {
$('.transform').toggleClass('transform-active');
});
Related
I have parent element which has mouseover event handler implemented using .mouseover() in Jquery.
It has 2 child elements, one contains image element, and second contains description element which has absolute position. On parent mouseover description slides on the image element.
Simplified version of code for the project would look like this:
$('.main-parent').mouseenter(function(){
$(this).addClass('item-hovered');
}).mouseleave(function(){
$(this).removeClass('item-hovered');
});
.main-parent {
position: relative;
}
.child-description {
color: #fff;
font-size: 2em;
position: absolute;
bottom: -45%;
opacity: 0;
transition: all 350ms;
}
.item-hovered .child-description {
bottom: 10%;
opacity: 1;
transition: all 350ms;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-parent">
<div class="child-image">
<img src="https://www.w3schools.com/w3css/img_lights.jpg">
</div>
<div class="child-description">
<h4 class="title">Title</h4>
<p class="subtitle">Subtitle</p>
<p>Lorem ipsum paragraph...</p>
</div>
</div>
As expected, .child-description is firing mouseover bind to .main-parent element, as it is its child and a part of it.
Is there a way to ignore .child-description element so that it doesn't fire function on mouseover event. The thing is before you hover the element, it is bellow the image made "invisible" to user using opacity: 0;, but it still can be hovered and used to fire mouseover of parent element.
I haven't find answer for this particular solution on stackoverflow, and if there is let me know. I appreciate your help :)
Yes, you would intercept the event for that child and then call event.preventDefault() and event.stopPropagation() as shown below.
Also, JQuery no longer recommends event shortcut methods, like mouseenter. Instead, they suggest using on().
$(".child-description").on("mouseover", function(event){
event.preventDefault(); // Cancel the event for this element
event.stopPropagation(); // Prevent the event from propagating to other elements
});
$('.main-parent').on("mouseenter", function(){
$(this).addClass('item-hovered');
}).on("mouseleave", function(){
$(this).removeClass('item-hovered');
});
.main-parent {
position: relative;
}
.child-description {
color: #fff;
font-size: 2em;
position: absolute;
bottom: -45%;
opacity: 0;
transition: all 350ms;
}
.item-hovered .child-description {
bottom: 10%;
opacity: 1;
transition: all 350ms;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-parent">
<div class="child-image">
<img src="https://www.w3schools.com/w3css/img_lights.jpg">
</div>
<div class="child-description">
<h4 class="title">Title</h4>
<p class="subtitle">Subtitle</p>
<p>Lorem ipsum paragraph...</p>
</div>
</div>
check whether child-description is the target of the event
$('.main-parent').mouseenter(function (e) {
if (!$(e.target).hasClass('child-description')) {
$(this).addClass('item-hovered');
}
}).mouseleave(function () {
$(this).removeClass('item-hovered');
});
Trying adding the following css rule to .child-description.
pointer-events: none;
.child-description {
color: #fff;
font-size: 2em;
position: absolute;
bottom: -45%;
opacity: 0;
transition: all 350ms;
pointer-events: none;
}
.item-hovered .child-description {
bottom: 10%;
opacity: 1;
transition: all 350ms;
pointer-events: auto;
}
This should prevent the element from responding to any mouse events. You will have to swap pointer-events: none; for pointer-events: auto; once you want the element to register interactions.
https://caniuse.com/#feat=pointer-events
I see some interesting answers here, so, I thought I would offer my own.
Why not use event.target and (in this particular case) event.target.className? Sample JSBIN Demo Online
For instance...
$('.main-parent').mouseover(function(e) {
if(e.target.className == 'subtitle') {
console.log("Child mouseover!");
return; // child mouseover, ignore
}
console.log("Parent mouseover!");
return true; // parent mouseover, activate some behavior
});
The advantage here should be observable -- you have quick, easy control of the paths of logic in relatively little code.
You should be able to prevent this using the stopPropagation method:
$('.child-description').on("mouseenter mouseleave", function(event) {
event.stopPropagation();
});
I want to run a javascript only upon the child from the element that triggered it. I have tried to make a research but couldn't find a way to get an answer. I know this might be simple but I am new to java.
Here is the fiddle of my problem FIDDLE.
What I want is that when I hover on the upper element, only its corresponding rating shows up, not both of them.
I have tried with find() without success
$('.product-image').hover(
function() {
$('.product-image').find('.ratings').css('opacity', '1');
},
function() {
$('.ratings').css('opacity', '0');
});
Thank you
Your problem is you do not select the element. You either need to change your code to use $(this) or $(evt.target) to get the element
How would I do it? With just CSS
.product-image + .ratings {
transition: opacity 0.5s ease;
opacity: 0;
}
.product-image:hover + .ratings {
opacity: 1;
}
.product-image {
height: 50px;
width: 50px;
background: red;
margin-bottom: 10px;
}
.ratings {
height: 50px;
width: 50px;
background: blue;
margin-bottom: 10px;
}
<div class="product">
<div class="product-image"></div>
<div class="ratings"></div>
</div>
<div class="product">
<div class="product-image"></div>
<div class="ratings"></div>
</div>
You can use event.target in your method body, which will give the element that triggered the hover event. Wrap it in $() to have jQuery context available.
$('.product-image').hover(function(event){
$(event.target).next('.ratings').css('opacity', '1');
}, function(event){
$(event.target).next('.ratings').css('opacity', '0');
});
Also updated your jsFiddle: http://jsfiddle.net/Z33kk/21/
I have used the jQueryUI toggleClass delay function however I realised that it creates a delay before the event happens, rather than setting a time before it can be activated again.
I have a few DIVs that switch between classes when they are hovered over using the toggleClass method. However if the cursor is moved quickly over them they keep swapping and it looks buggy. I would like to prevent this by perhaps allowing the toggle to only happen once every 1 second or something.
Is this possible?
$(".landingImage").hover(function () {
var curHeight = this.clientHeight;
$(this).siblings('.imageCover').css("height", curHeight / 1.25);
$(".leftLanding").toggleClass("extraMargin");
$(".rightLanding").toggleClass("extraMargin");
$(this).siblings(".imageCenter").fadeOut(50);
}, function () {
$(this).siblings('.imageCover').css("height", "0px");
$(this).siblings(".imageCenter").fadeIn(600);
});
#landing-images {
position: relative;
width: 100%;
height: auto;
overflow: auto;
margin-top: 6%;
margin-bottom: 5%;
}
.leftLanding {
display: flex;
position: relative;
width: 85%;
margin-left: 3%;
cursor: pointer;
transition: all 0.5s ease;
}
.rightLanding {
display: flex;
position: relative;
width: 85%;
margin-right: 3%;
cursor: pointer;
transition: all 0.5s ease;
}
.extraMargin {
margin-left: 12%;
margin-right: 12%;
}
.landingImage {
position: relative;
display: block;
width: 100%;
height: auto;
z-index: 90;
transition: all 0.5s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="landing-images">
<a href="menu.html"><div class="leftLanding left">
<div class="imageCover">
</div>
<div class="imageCenter">
</div>
<img class="landingImage" src="assets/landingIMG1.png">
</div></a>
<a href="contact.html"><div class="rightLanding right">
<div class="imageCover">
</div>
<div class="imageCenter">
</div>
<img class="landingImage" src="assets/landingIMG3.png">
</div></a>
<a href="burritos.html"><div class="leftLanding left">
<div class="imageCover">
</div>
<div class="imageCenter">
</div>
<img class="landingImage" src="assets/landingIMG2.png">
</div></a>
</div>
If you want to conditionally delay the hover event, you can delay the action using window.setTimeout.
The idea is that you
- set the change to wait for a short while
- set the mouse out behaviour to cancel the pending change.
This code will do something like it:
var delay;
$(".landingImage").hover(function () {
window.setTimeout(doit,250); // queue action
}, function () {
cancel(); // clear hover, if still pending
$(this).siblings('.imageCover').css("height", "0px");
$(this).siblings(".imageCenter").fadeIn(600);
});
function doit() {
var $landingImage=$(".landingImage");
var curHeight = $landingImage.clientHeight;
$landingImage.siblings('.imageCover').css("height", curHeight / 1.25);
$(".leftLanding").toggleClass("extraMargin");
$(".rightLanding").toggleClass("extraMargin");
$landingImage.siblings(".imageCenter").fadeOut(50);
delay=undefined;
}
function cancel() {
if(delay) delay=window.clearTimeout(delay);
}
Because setTimeout is a window method, this is no longer valid. Here I have set a variable to the original element. I generally prefix jQuery variables with $, but that is just a matter of taste.
I haven’t tested in your environment, of course.
As regards doing it the CSS way:
If you want to avoid instant changes, you can add the following to your CSS:
transition-delay: .25s;
or whatever suits you.
transition-delay can also be combined with the general transition property (put it last), but try this first to see how it works.
I have a few items on a site I'm building that onclick activate a modal like this.
Right now the animation is a one-way in that, when you close it or click off from the modal's focus, it just disappears. From what I've been reading, people seems to use the fadeIn/slideIn animation for one time effects, but is it possible, to reverse the animation so instead of just changing display to none, it slides back out?
#modal{bottom: 0; opacity: 1; transition: bottom 400ms, opacity 400ms; }
#modal.hidden{bottom: -300px; opacity: 0}
Then in button click event:
$("#modal").addClass("hidden")
On close event:
$("#modal").removeClass("hidden")
If you need pure javascript, it would be a bit more code but essentially that's it
Depending on how you've structured your code, you can approach this in a few ways:
Make use of the animation-direction: reverse; CSS property
Use a Javascript framework (like jQuery) that enables manipulation of DOM elements (with jQuery you could do something like: $('element').slideIn(); to show the modal and $('element').slideOut(); to hide the modal).
Use CSS classes and apply / unapply them with Javascript (the option I'd recommend, and have given an example below):
$(document).ready(function() {
$('.open').on('click', function(e) {
e.preventDefault();
if ($('.modal').hasClass('hide')) {
$('.modal').removeClass('hide');
}
$('.modal').addClass('show');
});
$('.close').on('click', function(e) {
e.preventDefault();
$('.modal').addClass('hide');
if ($('.modal').hasClass('show')) {
$('.modal').removeClass('show');
}
});
});
.modal {
position: fixed;
top: 0;
left: 0;
width: 300px;
height: 300px;
left: -305px;
z-index: 999;
transition: all 0.3s ease;
background: #ffffff;
border: 1px solid blue;
}
.modal.show {
left: 150px;
}
.modal.hide {
left: -305px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Click here to open modal</p>
<div class="modal">
<p>This is a modal window.</p>
<p>Click here to close</p>
</div>
Please note that this example is only there to illustrate a proof of concept - you'll need to tidy it yourself :)
Is there a way to change how fast the tooltip from an element's "title" attribute? I'd like it if the tooltip appeared immediately, but it seems to take a few seconds to appear.
No, there's no way. The title attribute is implemented in a browser dependent fashion. For example I remember differences between IE and FF when using \r\n inside it.
Mozilla's docs explain the limits and functionality well.
If you want customization you may take a look at third party plugins such as qTip2 which mimic it using divs and stuff and provide you full control.
You could use jqueryUI as suggested. An example of controlling the duration on the show property:
$( ".selector" ).tooltip({ show: { effect: "blind", duration: 800 } });
Jquery UI tooltip is extremely simple and customizable: Just download or include jquery UI in your page.
If you want all the tooltips of your page to show immediately at hover, just use this:
$(document).tooltip({show: null});
Note that this applies to all elements that have a 'title' attribute.
You can modify the selector to affect only a class, and set custom speed or effect:
$('.yourClass').tooltip({show: {effect:"none", delay:0}});
Unfortunately, there is no way to do this yet,
so I am using the following methods to help. (No dependencies required)
<style>
[title] {
position: relative;
}
[title]:after {
content: attr(title);
position: absolute;
left: 50%;
bottom: 100%; /* put it on the top */
background-color: yellow;
width: max-content;
opacity: 0;
-webkit-transition: opacity 0.75s ease-in-out; /* 👈 Change the time to meet your requirements. */
}
[title]:hover:after {
opacity: 1;
}
</style>
<div style="min-height:5rem"></div>
<div style="min-width: 5rem; border: 2px solid red;" title="hello world">my div</div>
<button title="for debug">button</button>
If you don't want the title to conflict with it, you can use data-* w3school.data-* help you, for example.
<style>
[data-tooltip] {
position: relative;
}
[data-tooltip]:after {
content: attr(data-tooltip);
position: absolute;
left: 50%;
bottom: 100%; /* put it on the top */
background-color: yellow;
width: max-content;
opacity: 0;
-webkit-transition: opacity 0.75s ease-in-out;
}
[data-tooltip]:hover:after {
opacity: 1;
}
div[data-tooltip]:after {
left: 5px!important;
}
</style>
<div style="min-height:5rem"></div>
<div style="min-width: 5rem; border: 2px solid red;" data-tooltip="hello world">my div</div>
<button data-tooltip="for debug">button</button>
<button title="for debug">title only</button>
<button data-tooltip="my tool tip msg" title="my title msg">title and tooltip</button>
below link may help you too.
fade in and out on simple css tooltip
It isn't possible to change how fast default browser's tooltip appear, but you can use one of the tooltip plugins (here is few: http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/ ) where you can customise lot's of things, including delay.
TippyJS has a billion customization options.
https://atomiks.github.io/tippyjs
https://github.com/atomiks/tippyjs