I am trying to create an expandable rollover but to interact with elements inside. So what I have here is an expandable div and when is expanded another div is shown "x". What I want is when I click on #wrap to go on google and when I click on #button to go on yahoo. How you can see, now if I am over "x" I am going out of #wrap area and going as mouseout. Any idea how to fix this?
https://jsfiddle.net/Ln6q9q9b/
<script>
$(document).ready(function() {
$("#wrap").hover(
//on mouseover
function() {
$(this).animate({height: '+=250'}, 'slow');
$('#button').css('display', 'block');
expanded = true;
console.log("expanded is " + expanded);
},
//on mouseout
function() {
$(this).animate({height: '-=250px'}, 'slow');
$("#button").hide();
expanded = false;
console.log("expanded is " + expanded);
}
);
$('#wrap').on('click', function(){
window.open('http://google.com', 'click', 'window settings');
return false;
console.log('click');
});
if(expanded = true){
$("#button").on('click', function(){
window.open('http://yahoo.com', 'click', 'window settings');
return false;
});
};
});
</script>
<style type="text/css">
#wrap{
width: 900px;
height:50px;
overflow:hidden;
background: black;
}
#button{
position: absolute;
color: white;
left: 10;
top: 10;
width: 10px;
height: 10px;
cursor: pointer;
}
</style>
<body>
<div id="wrap">
</div>
<div id="button">X</div>
</body>
Add the button inside wrap.
And give position: relative; to wrap.
https://jsfiddle.net/afelixj/Ln6q9q9b/1/
Not 100% sure what you're trying to achieve, but take a look at relatedTarget.
For mouseout, indicates the element being entered; for mouseover,
indicates the element being exited.
To your mouseout listener you could add
function (evt) {
if(evt.relatedTarget.id === "button") return;
$(this).animate({height: '-=250px'}, 'slow');
//etc;
}
The following seems to work
$(document).ready(function() {
var expanded = false;
$("#wrap").hover(
//on mouseover
function() {
if (expanded) { return; }
$(this).animate({height: '+=250'}, 'slow');
$('#button').css('display', 'block');
expanded = true;
console.log("expanded is " + expanded);
},
//on mouseout
function(evt) {
if (evt.relatedTarget.id === "button") { return; }
$(this).animate({height: '-=250px'}, 'slow');
$("#button").hide();
expanded = false;
console.log("expanded is " + expanded);
}
);
$('#wrap').on('click', function(){
window.open('http://google.com', 'click', 'window settings');
return false;
console.log('click');
});
$("#button").on('click', function(evt){
window.open('http://yahoo.com', 'click', 'window settings');
return false;
});
});
I've added if (expanded) { return; } to the mouseover listener too, and removed the if (expanded = true) check entirely.
If I understand you right, all you need to do is put the #button inside the #wrap div.
<div id="wrap"><div id="button">X</div></div>
Leave the rest the same and it seems to work as you want.
Related
this the CSS I use.
.setting-box
{
position: fixed;
left:-200px;
top:0;
width: 200px;
z-index: 1000;
min-height: 100vh;
}
.toggle-setting
{
position: absolute;
right: -34px;
top: 6em;
background: #fff;
border-radius: 0px 5px 5px 0;
text-align: center;
cursor: pointer;
}
I tried a lot of things but it doesn't work!
that code works very well but.
except when I click on the page the setting box doesn't close
$('.setting-box .toggle-setting').on('click',function () {
$(this).parent('.setting-box').toggleClass('open');
if ($(this).parent('.setting-box').hasClass('open')) {
$(this).parent('.setting-box').animate({
left:0,
},1000);
} else {
$(this, 'body').parent('.setting-box').animate({
left:'-200'
},1000);
}
});
You can try this.
EDIT
var clicked = false;
$('.setting-box .toggle-setting').on('click',function () {
if (clicked == false) {
$(this).parent('.setting-box').animate({
'left' : '0',
},1000);
clicked = true;
} else {
$(this).parent('.setting-box').animate({
'left' : '-200px',
},1000);
clicked = false;
}
console.log(clicked);
});
$(document).click( function () {
var target = $(event.target);
if (!target.is(".toggle-setting") && !target.is('.setting-box') && clicked == true) {
$('.setting-box').animate({
'left' :'-200px',
},1000);
clicked = false;
console.log(clicked);
}
});
the first function do toggle setting box;
$('#gear-button').click(function() {
$(".setting-box").toggleClass("display-block");
});
second function hide setting box on document click (body click)
// hide setting box on body click
$(document).on('click', function() {
$(".setting-box").removeClass("display-block");
});
the third function stop the click event when the user clicks on a button or setting box to prevent document click
$("#gear-button, .setting-box").click(function(e) {
e.stopPropagation();
})
In general, you can use this template to add your own animation and classes.
the full example :
JSFiddle
You can place the settings block in another block, place the settings in the align:center;,
add from this from the z-index:; and make when you click on the gear, or anywhere, so that this block takes the style of display:none;. This may help you.
I have button on HTML page. When I click on it, I display a popup. When I do that I need to disable the background or gray out background except the popup I have opened. When mouse/cursor clicks out of this popup, everything should come to normal (enable everything) and popup closes.
I am using below code:
</i> Select Region
<script type="text/javascript">
window.onload = function() {
var modal = new RModal(document.getElementById('modal'), {
//content: 'Abracadabra'
beforeOpen: function(next) {
console.log('beforeOpen');
next();
}
, afterOpen: function() {
console.log('opened');
}
, beforeClose: function(next) {
console.log('beforeClose');
next();
}
, afterClose: function() {
console.log('closed');
}
// , bodyClass: 'modal-open'
// , dialogClass: 'modal-dialog modal-dialog-lg'
// , dialogOpenClass: 'animated fadeIn'
// , dialogCloseClass: 'animated fadeOut'
// , focus: true
// , focusElements: ['input.form-control', 'textarea', 'button.btn-primary']
// , escapeClose: true
});
document.addEventListener('keydown', function(ev) {
modal.keydown(ev);
}, false);
document.getElementById('showModal').addEventListener("click", function(ev) {
ev.preventDefault();
modal.open();
}, false);
window.modal = modal;
}
</script>
Here is my answer:
<script type="text/javascript">
window.onload = function() {
var modal = new RModal(document.getElementById('modal'), {
//content: 'Abracadabra'
beforeOpen: function(next) {
console.log('beforeOpen');
next();
}
, afterOpen: function() {
console.log('opened');
}
, beforeClose: function(next) {
console.log('beforeClose');
next();
}
, afterClose: function() {
console.log('closed');
}
// , bodyClass: 'modal-open'
// , dialogClass: 'modal-dialog modal-dialog-lg'
// , dialogOpenClass: 'animated fadeIn'
// , dialogCloseClass: 'animated fadeOut'
// , focus: true
// , focusElements: ['input.form-control', 'textarea', 'button.btn-primary']
// , escapeClose: true
});
document.addEventListener('keydown', function(ev) {
modal.keydown(ev);
}, false);
document.getElementById('showModal').addEventListener("click", function(ev) {
ev.preventDefault();
modal.open();
}, false);
window.modal = modal;
document.getElementById('modal').addEventListener("click", function(ev) {
ev.preventDefault();
modal.close();
}, false);
document.getElementsByClassName("modal-content")[0].addEventListener("click", function(ev) {
ev.preventDefault();
ev.stopPropagation();
}, false);
}
</script>
You can bind an eventListener to the body each time the modal opens, that calls the modal.close method.
The afterOpen method will look like this:
afterOpen: function() {
console.log('opened');
document.body.addEventListener("click", closeModal, false);
}
Then the closeModal function has to unsubscribe from the body.click event:
function closeModal(ev) {
ev.preventDefault();
modal.close();
document.body.removeEventListener('click', closeModal, false);
}
I've never worked with RModal, so I don't know its API.
You can reverse engineer this basic example:
The important part is using node.contains() to check if the item clicked on is outside the modal, else you'll hide the modal on every click. The css is just there to give you the blackened background effect.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#wrapper {
background-color: rgba(0,0,0,0.5);
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#wrapper.active {
display: block;
}
#popup {
background-color: red;
border: 1px solid black;
margin: 20% auto;
padding: 20px;
width: 20%;
}
</style>
</head>
<body>
<button>show popup</button>
<div id="wrapper">
<div id="popup">POPUP</div>
</div>
<script>
var wrapper = document.querySelector('#wrapper'),
popup = document.querySelector('#popup'),
checkHidePopup = function checkHidePopup( event ) {
if (!popup.contains(event.target)) {
wrapper.className = '';
wrapper.removeEventListener('click', checkHidePopup, false);
}
};
document.querySelector('button').addEventListener('click', function( event ) {
wrapper.className = 'active';
wrapper.addEventListener('click', checkHidePopup, false);
});
</script>
</body>
</html>
I am trying to achieve the "back to top" feature on a page through simple jquery. The "BACK TO TOP" button appears/disappears as expected.
When it appears if I click on it, I expect it to go to the top of the page, instead nothing happens. I am not sure what's going wrong.
Here's the code:
css:
#btoTop {
padding: 15px 10px;
background: #1f242a;
color: #fff;
position: fixed;
bottom: 0;
right: 15px;
display: none;
cursor:pointer;
cursor:hand;
width:130px;
height:40px;
}
html:
<div id='btoTop'>BACK TO TOP</div>
js:
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop() > 0){
$("#btoTop").fadeIn("slow");
}
else {
$("#btoTop").fadeOut("slow");
}
});
$("#btoTop").click(function(event){
event.preventDefault();
$("html, body").animate({scrollTop:0 },"slow");
});
});
Note: If I call the click function inside the $(window).scroll(), I am able to click the button. But it flickers and doesn't work well with window resize.
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop() > 0){
$("#btoTop").fadeIn("slow");
}
else {
$("#btoTop").fadeOut("slow");
}
$("#btoTop").click(function(event){
event.preventDefault();
$("html, body").animate({scrollTop:0 },"slow");
});
});
});
You're binding click on your button every single time you scroll, which is unnecessary. You should change it:
$(document).ready(function () {
$(window).scroll(function () {
if( $(window).scrollTop() > 0 ) {
$("#btoTop").fadeIn("slow");
} else {
$("#btoTop").fadeOut("slow");
}
});
// Bound a single time
$("#btoTop").click(function ( event ) {
event.preventDefault();
console.log("Clicked the button");
$("html, body").animate({scrollTop:0 },"slow");
});
});
This might not be the problem, but should be changed to avoid strange behaviours in your code.
I figured out the button was not yet available in the DOM when I was trying to click it.
Adding a timer on it worked pretty good. Hope this helps someone out there with similar issue...
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop() > 0){
$("#btoTop").fadeIn("slow");
}
else {
$("#btoTop").fadeOut("slow");
}
});
$timeout( function() {
$("#btoTop").click(function(event){
event.preventDefault();
$("html, body").animate({scrollTop:0 },"slow");
});
}, 500);
});
Hi i have this animated width changer, it seems to auto resize to 100% when i click expand on this script then click my header logo. any ideas why?
$(".fluid").hide();
$(".fixed").click(function() {
$("#mainwidth").animate({width: "1024px"}, 800);
$(this).hide();
$(".fluid").show();
$.cookie("width","fixed", {expires: 365});
return false;
});
$(".fluid").click(function() {
$("#mainwidth").animate({width: "95%"}, 800);
$(this).hide();
$(".fixed").show();
$.cookie("width","fluid", {expires: 365});
return false;
});
if($.cookie("width") == "fixed") {
$(".fixed").hide();
$(".fluid").show();
$("#mainwidth").css("width","1024px");
};
text-align: left;
line-height: 1.4;
margin: auto auto;
margin-top: 40px;
margin-bottom: 50px;
The issue occurs in the following block:
<script type="text/javascript">
jQuery(function($) {
$(".fluid").hide();
$(".fixed").click(function() {
$("#mainwidth").animate({width: "1024px"}, 800);
$(this).hide();
$(".fluid").show();
$.cookie("width","fixed", {expires: 365});
return false;
});
$(".fluid").click(function() {
$("#mainwidth").animate({width: "95%"}, 800);
$(this).hide();
$(".fixed").show();
$.cookie("width","fluid", {expires: 365});
return false;
});
if($.cookie("width") == "fixed") {
$(".fixed").hide();
$(".fluid").show();
$("#mainwidth").css("width","1024px");
};
});
</script>
lets have a look at the last statement:
if($.cookie("width") == "fixed") {
$(".fixed").hide();
$(".fluid").show();
$("#mainwidth").css("width","1024px");
};
it instructs the browser to change the width when page loads. if the width cookie value is "fixed", then set width to 1024px. however, what happens if the page reloads while the cookie value is "fluid" ?
when you click the logo, it reloads the page. hence, if the cookie value is fluid, the width will not be set to the relevant value. just add another block of code to handle the situation where the cookie value is "fluid" and it will work fine.
if($.cookie("width") == "fixed") {
$(".fixed").hide();
$(".fluid").show();
$("#mainwidth").css("width","1024px");
}
else if($.cookie("width") == "fluid") {
$(".fluid").hide();
$(".fixed").show();
$("#mainwidth").css("width","95%");
};
I have a "a" element that I want to scroll left on hover. To do this I remove the first character and append it to the end of the string.
How can I continuously fire up the scroll function?
Mouse enters element -> scroll() is fired until mouse leaves the element or user clicks on it.
html:
this text scrolls on hover
jQuery:
$(".scrollthis").hover(function(){
scroll($(this));
});
function scroll(ele){
var s = $(ele).text().substr(1)+$(ele).text().substr(0,1);
$(ele).text(s);
}
Use setInterval() to call it repeatedly from mouseenter, then clearInterval() to stop it on mouseleave:
var intervalID;
$(".scrollthis").hover(function(){
var $this = $(this);
intervalID = setInterval(function() {
scroll($this);
}, 100);
}, function() {
clearInterval(intervalID);
});
Note that you don't need to use $(ele) in your scroll() function because ele is already a jQuery object:
function scroll(ele){
var s = ele.text().substr(1)+ele.text().substr(0,1);
ele.text(s);
}
Demo: http://jsfiddle.net/hTBZn/
You can make your scroll() function a bit neater if you use the callback syntax of the .text() method (or even move that one line directly into the .hover code):
function scroll(ele){
ele.text(function(i,val) { return val.substr(1) + val.substr(0,1); });
}
Demo: http://jsfiddle.net/hTBZn/1/
Here's the full code, you can try it out as a jsfiddle
function scroll(ele){
var s = $(ele).text().substr(1)+$(ele).text().substr(0,1);
$(ele).text(s);
}
scrollInterval = null;
function startScrolling(e) {
if (!scrollInterval) {
scrollInterval = setInterval(function(){
scroll(e)
},100);
}
}
function stopScrolling(e) {
clearInterval(scrollInterval);
scrollInterval = null;
}
$(".scrollthis").hover(function(){
startScrolling($(this));
});
$(".scrollthis").mouseout(function(){
stopScrolling($(this));
});
$(".scrollthis").mousedown(function(){
stopScrolling($(this));
});
css
div.container{
width: 130px;
}
div.title-holder {
width: 130px;
height:20px;
text-align:center;
background: silver;
overflow:hidden;
position: relative;
}
div.title-holder a {
position: relative;
white-space:nowrap;
left: 0px;
}
div.image{
background: brown;
width: 100%;
height: 100px;
}
html
<div class="container">
<div class="title-holder">
long text that needs to scroll, long text that needs to scroll, long text that needs to scroll
</div>
</div>
js
$(function(){
var scroll_text;
$('div.container').hover(
function () {
var $elmt = $(this);
scroll_text = setInterval(function(){scrollText($elmt);}, 5);
},
function () {
clearInterval(scroll_text);
$(this).find('div.title-holder a').css({
left: 0
});
}
);
var scrollText = function($elmt){
var left = $elmt.find('div.title-holder a').position().left - 1;
left = -left > $elmt.find('div.title-holder a').width() ? $elmt.find('div.title-holder').width() : left;
$elmt.find('div.title-holder a').css({
left: left
});
};
});