I want to make a slider with jquery. but when I pulled it out the frame "silderContainer", "sliders" will stop moving and when it returned through the "sliderContainer", "slider" will move again. What I want is how "slider" still moving when I pulled the mouse out of the frame.
Here the code:
<style>
body{
padding:60px;
height:800px;
}
.sliderContainer{
//position:relative;
width:200px;
background-color:#CCC;
height:30px;
margin-top:16px;
cursor:pointer;
}
.slider{
position:absolute;
width:50px;
height:30px;
background:#fa565a;
float:right;
}
</style>
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).on('ready', function(){
function moveSlider(e){
e.preventDefault();
var pos = $(e.currentTarget).offset()
, posX = e.pageX - pos.left;
if(posX >= 0 && posX <= $(e.currentTarget).outerWidth()){
$('.slider').css('width', posX+'px');
}
}
$('.sliderContainer').on('mousedown', function(e){
moveSlider(e);
$(this).on('mousemove', function(e){
moveSlider(e);
});
}).on('mouseup', function(){
$(this).off('mousemove');
});
});
</script>
<div class='sliderContainer'>
<div class='slider'></div>
</div>
</body>
Any help would be greatly appreciated. Thank you.
It's because the target element is .sliderContainer. So think about it like this - when you're on a web page and you hold down your mouse over any normal form button and then move your mouse in and out of it, the focus is lost on the object.
http://www.w3schools.com/html/html_forms.asp
Look for the 'Submit Button' section and test it out.
What your logic says is that while the focus is on the container element and a mouse move event is registered, then the javascript can respond to it. But as soon as focus is lost (eg. moving outside of the region of the element) then it can't respond anymore.
Instead of attaching events to the container element itself, you could register them with the document or window, or another object that has a larger space behind it, so that focus is maintained.
Here's an example:
Losing MouseUp event if releasing not over the same element
Related
I want to add a click event to an iframe. I used this example and got this:
$(document).ready(function () {
$('#left').bind('click', function(event) { alert('test'); });
});
<iframe src="left.html" id="left">
</iframe>
But unfortunately nothing happens.
When I test it with another element (e.g. a button), it works:
<input type="button" id="left" value="test">
You could attach the click to the iframe content:
$('iframe').load(function(){
$(this).contents().find("body").on('click', function(event) { alert('test'); });
});
Note: this will only work if both pages are in the same domain.
Live demo: http://jsfiddle.net/4HQc4/
Two solutions:
Using :after on a .iframeWrapper element
Using pointer-events:none; one the iframe
1. Using :after
use a transparent overlay ::after pseudo element with higher z-index on the iframe's wrapper DIV element. Such will help the wrapper to register the click:
jQuery(function ($) { // DOM ready
$('.iframeWrapper').on('click', function(e) {
e.preventDefault();
alert('test');
});
});
.iframeWrapper{
display:inline-block;
position:relative;
}
.iframeWrapper::after{ /* I have higher Z-index so I can catch the click! Yey */
content:"";
position:absolute;
z-index:1;
width:100%;
height:100%;
left:0;
top:0;
}
.iframeWrapper iframe{
vertical-align:top;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="iframeWrapper">
<iframe src="http://www.reuters.tv/" frameBorder="0"></iframe>
</div>
2. Using pointer-events:none;
Clicks are not handleable from outside the iframe from an external resource (if the iframe is not in your domain).
You can only create that function inside your 'called into iframe' page, not from within the iframe-hosting page.
How to do it:
You can wrap your iframe into a div
make the click "go through" your iframe using CSS pointer-events:none;
target clicks with jQuery on your wrapping DIV (the iframe parent element)
jQuery(function ($) { // DOM ready
$('.iframeWrapper').on('click', function(e) {
e.preventDefault();
alert('test');
});
});
.iframeWrapper{
display:inline-block;
position:relative;
}
.iframeWrapper iframe{
vertical-align:top;
pointer-events: none; /* let any clicks go trough me */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="iframeWrapper">
<iframe src="http://www.reuters.tv/" frameBorder="0"></iframe>
</div>
NOTA BENE:
No clicks will be registered by the iframe element, so a use-case would be i.e: if by clicking the iframe you want to enlarge it full screen.... Etc...
I got it to work but only after uploading it to a host. I imagine localhost would work fine too.
outer
<html>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
var myFrame = document.getElementById("myFrame");
$(myFrame.contentWindow.document).find("div").on("click", function () { alert("clicked"); });
});
</script>
<body>
<iframe id="myFrame" src="inner.htm"></iframe>
</body>
</html>
inner
<html>
<head>
<style>
div {
padding:2px;
border:1px solid black;
display:inline-block;
}
</style>
</head>
<body>
<div>Click Me</div>
</body>
</html>
Pure Javascript
Not my solution but only this works well.
let myConfObj = {
iframeMouseOver : false
}
window.addEventListener('blur',function(){
if(myConfObj.iframeMouseOver){
console.log('Wow! Iframe Click!');
}
});
document.getElementById('YOUR_CONTAINER_ID').addEventListener('mouseover',function(){
myConfObj.iframeMouseOver = true;
});
document.getElementById('YOUR_CONTAINER_ID').addEventListener('mouseout',function(){
myConfObj.iframeMouseOver = false;
});
$(document).ready(function () {
$('#left').click(function(event) { alert('test'); });
});
<iframe src="left.html" id="left">Your Browser Does Not Support iframes</iframe>
The script would have to be ran entirely from the iframe. I would recommend a different method of calling content, such as php.
iframes aren't really worth the hassle.
The actual problem is that, the click event does not bind to the DOM of the iframe and bind() is deprecated, use .on() to bind the event. Try with the following codes and you will find the borders of the iframe clickable getting that alert.
$('#left').on('click', function(event) { alert('test'); });
Demo of that Issue
So how to get it done?
How you should do is, create a function on iframe page, and call that function from that iframe page.
I want my div containing text to move 10px to the right everytime upon click.
Here is the HTML:
<div id='color-div' style='clear:both; position:relative; left:0;'> </div>
And the script:
document.getElementById('color-div').style.right='10px';
My event is already defined and everything else is working as it should.
To move the div to the right, you should add to left, not right
You need to add a clickhandler to your div.
You are setting the style to a fixed value, to increasing it.
Add
onclick="moveRight()"
to your div, and change your javascript to this:
var moveRight = function(){
var current_offset = parseInt(document.getElementById('color-div').style.left);
document.getElementById('color-div').style.left = current_offset + 10 + "px";
}
Check it out here: jsFiddle
you might like to use this little javascript
<script language="javascript">
function example_animate(px) {
$('#example').animate({
'marginLeft' : px
});
}
</script>
<input type="button" value="Move Right" onclick="example_animate('+=50px')" />
and instead of moving it on button click, call this function on div click event.
Using jquery you can achieve this with : Example
HTML :
<div class="click-me"></div>
CSS :
.click-me {
display:block;
height:50px;
width:50px;
background:blue;
position:absolute;
}
Javascript :
$(document).ready(function() {
$('.click-me').click(function() {
$this = $(this);
var currentLeft = $this.offset().left;
$this.css("left", currentLeft + 10);
});
});
I have a blog at Blogger.com and I want to add a Scroll Triggered Box like Dreamgrow or Qoate Scroll Triggered Box of Wordpress. I referred Scroll Triggered Box with jQuery. I have created a HTML file and testing it but this is not working for me. May be I have mistaken somewhere. My coding is
<html>
<head>
<title>Scroll Triggered Box With jQuery</title>
<style type="text/css">
.Comments
{
font:georgia;
display:none;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
$(window).scroll(function () {
var y = $(window).scrollTop();
var c = $('#comments').offset();
if (y > (c.top - $(window).height())) {
$('#the_box').fadeIn("slow");
} else {
$('#the_box').fadeOut('slow');
}
});
});
</script>
<div>
<!--My long post here-->
</div>
<div class="Comments" id="the_box">
This is the DIV that triggers I scroll down to Comments</br>
This is the DIV that triggers I scroll down to Comments</br>
This is the DIV that triggers I scroll down to Comments</br>
This is the DIV that triggers I scroll down to Comments</br>
This is the DIV that triggers I scroll down to Comments</br>
This is the DIV that triggers I scroll down to Comments
</div>
</body>
</html>
I am little weak in jScript. I don't know how jScript works.
How can I resolve my issue and get this working in my Blogger.com blog?
i can tell your code is haywire.
var a =$(window).height();
var num = c-y;
if (y > num){
do your function
}else{
do whatever
}
Having:
<div id="outerDiv">
<div id="innerDiv" style="margin: 10px">Content goes here</div>
</div>
I want to identify those mouse events that happen outside innerDiv but inside outerDiv (said in a different way, those events over the innerDiv margin).
This is easy to achieve if I add outerDiv a padding or a border, but I would like to know if there is another way to do this without having to add extra pixels to outerDiv.
Thanks
Using jQuery I would do the following
$("#outerDiv").bind("event", function(e) {
if ($(e.target).closest("#innerDiv")) {
alert("from inner div");
}
else {
alert("from outer div only");
}
});
Explanation:
#outerDiv will get a bubbled event. If the event's target or target's ancestor is #innerDiv then we know it originated within the inner div. Otherwise it did not. Since it hit #outerDiv we know that it happened somewhere in #outerDiv but not in #innerDiv
This can be achieved by use of a flag:
<div id="outerDiv" style="border:thin solid red;">
<div id="innerDiv" style="border:thin solid blue; margin: 10px;">Content goes here</div>
</div>
<script language="javascript">
var flag = false;
document.getElementById("outerDiv").onclick = function(){
if (flag) {
flag = false;
return false;
}
alert("Clicked outerDiv");
}
document.getElementById("innerDiv").onclick = function(){
flag = true;
alert("Clicked innerDiv");
}
</script>
The essence is that the event for innerDiv will fire first. If so, prevent the event for outerDiv.
The technique works for onmousedown, onmouseup and onmousemove.
I'm in the process of learning Javascript and I'm trying to create a simple dropdown menu. An example of my desired functionality can be seen on the google homepage in the top menu with the "more" and "settings" dropdown. Specifically when you click off the menu, the menu disappears.
What code do I need to place in the hideMenus function in Javascript to hide the visible uls when a click occurs anywhere on screen?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<style type="text/css">
a
{
color:blue;
}
.info ul.submenu
{
border: solid 1px #e0e0e0;
background-color: #fff;
position: absolute;
padding: 0;
z-index: 2;
display: none;
}
.info ul.submenu li
{
display: block;
border-top: solid 1px #e0e0e0;
margin: 0px 10px 0 10px;
}
.info ul.submenu li a
{
display: block;
padding: 7px 0px 6px 0;
color: #1177ee;
cursor:pointer;
}
</style>
<script type="text/javascript">
function hideMenus()
{
//TODO
}
function menu(id) {
var myLayer = document.getElementById(id);
myLayer.onblur = function() {
myLayer.style.display = 'none';
};
if (myLayer.style.display == "none" || myLayer.style.display == "") {
myLayer.style.display = "block";
} else {
myLayer.style.display = "none";
}
}
</script>
</head>
<body onclick="hideMenus();">
<div class="info">
Some Text Boom A <a onclick="menu('id1');">Link</a> | More text
<a onclick="menu('id2');">Another Link</a> | more text
<ul id="id1" class="submenu">
<li>A1</li>
<li>A2 This is Long</li>
<li>A3</li>
</ul>
<ul id="id2" class="submenu">
<li>B1</li>
<li>B2</li>
<li>B3</li>
</ul>
</div>
</body>
</html>
I do not want to use jQuery.
It looks like you have a pretty decent setup as-is. You'll likely run into some event bubbling problems (for more info, take a look at PPK's Event Order Article). That seems to be outside of the scope of your current question, so I'll just give you what you asked for:
hideMenus()
{
var uls = document.getElementsByTagName('ul'), i;
for (i = 0; i < uls.length; i++)
{
if (uls[i].className === 'submenu' && uls[i].style.display !== 'none')
{
uls[i].style.display = 'none';
}
}
}
First, we get all the <ul>'s on the page. Then, we loop through all of them, check to see if it's a submenu, and if it's currently displayed. If both are true, then we hide it.
There are a couple faults with this code:
If the uls have more than one class (class="animal submenu"), then it will not hide the menu
It will look through all the <ul>'s on the page. This isn't exactly efficient, but it's the only way to do it without cross-browser support for getElementsByClass.
These aren't huge faults, especially if you're only using this to learn about javascript, and if you closely control your code (i.e. no other developers are working on it). All in all, it's a good stepping stone.
In the future, I'd suggest using addEvent - a fairly common function that allows you to add event handlers to elements without using onclick="...". There are a couple different implementations of it, but they (almost) all work the same from your perspective. Here are links to Dean Edwards's Version and John Resig's Version
Good luck!
Here is more or less the logic we use in our web app for drop down menus:
<html>
<head>
<title></title>
</head>
<body>
<div style="position:relative;width:250px">
<a id="link" href="javascript:" onclick="showDiv(this)">Show menu</a>
<ul id="entries" style="display:none;background:#DEF;padding:0;margin:0">
<li>item 1</li>
<li>item 2</li>
</ul>
<input id="inp" style="position:absolute;left:-30px;width:0" />
</div>
<script>
function showDiv(lnk){
var entries = document.getElementById('entries'),
inp = document.getElementById('inp'),
nh = 'data-nohide';
//show the entries
entries.style.display = 'block';
entries.removeAttribute(nh);
inp.focus();
//if mouse over, can't close it
entries.onmouseover = function(){
this.setAttribute(nh, true);
inp.focus();
};
//if mouse out, can close it
entries.onmouseout = function(){
this.removeAttribute(nh);
};
entries.onclick = function(e){
//code when the user clicks on the menu...
alert((e.target||e.sourceElement).innerHTML);
this.style.display = 'none';
};
//if the user press ESC
inp.onkeyup = function(e){
if(e.keyCode === 27){
this.style.display = 'none';
this.removeAttribute(nh);
}else{
//do something else with other keys(ie:down, up, enter)...
inp.focus();
}
};
//click somewhere else input onblur
inp.onblur = function(){
if(!entries.getAttribute(nh)){
entries.style.display = 'none';
entries = inp = null;
}
};
}
</script>
</body>
</html>
The trick is to use an input field that has the focus, and when it looses it an onblur is triggered and close the menu.
The mouseover, mouseout are there to prevent the onblur to fire when the user click an item in the menu.
To have a toggle effect like an open/close on the link, I guess 2 links that hide each other are needed.
You can capture a click anywhere if you put onclick on the body.
Because of the javascript event propagation model, if you click anywhere on any element and you don't stop the event from propagating, it will reach body and hide the menus.
So basically this means that you want to capture body onclick and make it to hide the menus so when you click on any area of the page, it will close the menus.
But this hides a bit of unwanted behaviour - when you click on the button to show the menu, the menu will display and quickly after that hide (when the event reaches body). To prevent this, you will want to stop the event from propagating when you click on the button which shows the menu (you can see how this works in the code I posted below). The code shows where you need to touch to make it work nicely.
// this function stops event e or window.event if e is not present from
// propagating to other elements.
function stop_event(e) {
if(!e) {
e = window.event;
}
if (e.stopPropagation) e.stopPropagation();
e.cancelBubble = true;
if (e.preventDefault) e.preventDefault();
e.returnValue = false;
return false;
}
// now you just hide all the menus in your hideMenus
function hideMenus()
{
//pseudocode!
for all visible menus - hide // or if you want you can hide all menus,
// the hidden will remain hidden
}
Now the important part.
function menu(id) {
// your stuff here
stop_event(); // this will stop the event going down to the body
// and hiding it after showing it
// this means it will not flicker like: show-hide
}
And finally on your whole UL element:
//partly pesudocode
ul.onclick = function() { stop_event(); }
To explain again what this does:
1st. You hook your hideMenu function to body.onclick. This means that it will always hide the menus if we don't stop the event.
2nd. When you click the menu button, you show the menu and then we stop the event from going to the body. This way, the body.onclick will not fire and it will not hide the menu right after we opened it.
3rd. The ul.onclick means that the menu will not hide itself when we click on it (though if you want the menu to hide when you click the menu itself, you can remove this part).