I have the following code:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('.wrapper').append('<div class="floater" />');
var floater = $('.floater')
floater.css('top', 100);
floater.css('left', 200);
});
</script>
<style type="text/css">
.wrapper
{
width: 300px;
height: 300px;
border: 1px solid #000;
position: relative;
}
.floater
{
width: 10px;
height: 10px;
background-color: blue;
position: absolute;
display: block;
}
</style>
</head>
<body>
<table class="wrapper">
<tr>
<td>Cell content</td>
</tr>
</table>
</body>
</html>
Jsfiddle here (does not work on IE8): http://jsfiddle.net/W5ceN/3/
The idea is to have a div that will be positioned above the table and reposition it with javascript. It works nicely on Firefox and Chrome, but the floating div is not visible in IE8. Probably it's some CSS issue, but I have no idea where to look. Any help will be appreciated.
Related
I cannot make a simple click event on the "canvas" using JQuery click function.
$(document).ready(function(){
alert("test");
$("#canvas").click(function(){
alert("canvas");
});
$(".middle").click(function(){
alert("middle");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="middle">middle
<div id="canvas">canvas</div>
</div>
"test" message is appearing but functions above is not working. Other siblings of div "middle" (I did not include since I tried to remove them for testing and it still happening) can execute events but only this div and inside cannot execute a single event.
Tried also to console.log($("#canvas")) and it fetches some data below.
[div#canvas]
here is the complete html:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="/demo/resources/themes/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="/demo/resources/themes/custom/css/custom.css" rel="stylesheet" />
<script src="/demo/resources/themes/bootstrap/js/bootstrap.min.js"></script>
<script src="/Sketchy-demo/resources/themes/custom/js/custom.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>App Page</title>
</head>
<body>
<div class="middle">
<div id="canvas"></div>
</div>
</body>
</html>
custom.css
.middle{
z-index: -1;
position: relative;
display: block;
height: 88%;
width:100%;
top: 0px;
left:0px;
margin: 0px;
background-color: transparent;
}
#canvas{
display: block;
position: relative;
height: 88%;
width: 80%;
margin: auto;
top: 6%;
background-color: white;
border: 5px dashed black;
border-radius: 10px;
}
Below is the image of the divs:
This is really frustrating because this is a basic function that I cannot call.
Edit:
I added a https://jsfiddle.net/5mtt2khu/
Please let me know any questions.
Thanks!
Do with event.target element .And match with condition
Updated js Fiddle
$(document).ready(function() {
alert("test");
$(".middle").click(function(e) {
if($(e.target).attr('id')== 'canvas'){
alert('canvas')
//do stuff for canvas
}
else{
alert("middle");
//do stuff for middle
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="middle">middle
<div id="canvas">canvas</div>
</div>
Updated
Remove or change the z-index
$(document).ready(function() {
alert("test");
$(".middle").click(function(e) {
if ($(e.target).attr('id') == 'canvas') {
alert('canvas')
//do stuff for canvas
} else {
alert("middle");
//do stuff for middle
}
});
});
.middle {
z-index:0;/*remove or change > -1*/
position: relative;
display: block;
height: 88%;
width: 100%;
top: 0px;
left: 0px;
margin: 0px;
background-color: red;
}
#canvas {
display: block;
position: relative;
height: 88%;
width: 80%;
margin: auto;
top: 6%;
background-color: white;
border: 5px dashed black;
border-radius: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="middle">
<div id="canvas"></div>
</div>
Your code seems to work.
So the problem must come from other things. Here is some possibilities :
JQuery is not correctly installed
You have a javascript error before so this is never executed
Your html is dynamically added after you load the event handler
You have an other div with the same id somewhere
If your html is dynamically added, I recommend you to do something like this
$(document).ready ( function () {
$(document).on ("click", "#canvas", function () {
alert("canvas");
});
$(document).on ("click", "#middle", function () {
alert("middle");
});
});
If you have several "canvas" id, you can do something like :
$("[id=canvas]").click(function () {
alert("canvas");
});
I think you are looking for something like this:
$(document).ready(function(){
alert("test");
$("#canvas").click(function(e){
alert("canvas");
e.stopPropagation();
});
$(".middle").click(function(){
alert("middle");
});
});
.middle {
width: 200px;
height: 200px;
background: red;
}
#canvas {
width: 100px;
height: 100px;
background: green;
margin: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="middle">
<div id="canvas"></div>
</div>
Hope it helps :)
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" media="screen" />
</head>
<body>
<div class="middle">
<div id="canvas" style="width:10px;height:10px;background:red;"></div>
</div>
</body>
<script>
$(document).ready(function(){
alert("test");
$("#canvas").click(function(){
alert("canvas");
});
$(".middle").click(function(){
alert("middle");
});
});
</script>
Try to change the div to input type or button.It works when I specified the color to the div and clicking it.So, without knowing where to click the event was not working.
Your jQuery code is actually working fine as it should. The problem here is propably because the canvas has no height and width defined, so it's too small to actually be able to click on it.
Give the divs a height and width like the below code snippet and you'll see that the jQuery gets executed correctly.
$(document).ready(function(){
alert("test");
$("#canvas").click(function(){
alert("canvas");
});
$(".middle").click(function(){
alert("middle");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="middle" style="border: 1px solid black; height: 50px; width: 100px;">
<div id="canvas" style="border: 1px solid red; height: 15px; width: 30px;"></div>
</div>
I have a confusing issue. When my first div "leftbox" is hovered over, "rightbox" (the hidden div) displays, but it eventually disappears when "leftbox" is not hovered over. But I need "rightbox" to stay visible when rightbox is hovered over, then when the user's mouse leaves rightbox, then it should disappear. How can I get this to work? I'd really appreciate the help.
If you add a container class it works fine.
$(function(){
$('.container').hover(function(){
var boxId = $(this).find("[data-id]").attr('data-id');
$('#'+boxId).stop().fadeToggle();
});
});
.leftbox {
width: 100px;
height: 100px;
border: 1px solid black;
float: left;
}
.rightbox {
width: 100px;
height: 100px;
border: 1px solid black;
background: #99bf8f;
margin-left: 110px;
display: none;
}
.container {
float:left;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="container">
<div class="leftbox" data-id="functionbox1"></div>
<div class="rightbox" id="functionbox1"></div>
</div>
<script src="test.js"></script>
</body>
</html>
I have a simple jQuery website, where there are four blocks, when you press a block, another block slides out of it. It all works, for the most part, however, i was wondering how i could get the block that slides out to move the other elements below it down.
$(document).ready(function() {
var height = 145;
var speed = 600;
$("#one").animate({
width: "100%",
height: height
}, speed, function() {
$("#two").animate({
width: "100%",
height: height
}, speed, function() {
$("#three").animate({
width: "100%",
height: height
}, speed, function() {
$("#four").animate({
width: "100%",
height: height
}, speed);
});
});
});
$("#one").click(function() {
$(".dropDown").not("#oneS").slideUp();
$("#oneS").slideToggle();
});
$("#two").click(function() {
$(".dropDown").not("#twoS").slideUp();
$("#twoS").slideToggle();
});
$("#three").click(function() {
$(".dropDown").not("#threeS").slideUp();
$("#threeS").slideToggle();
});
$("#four").click(function() {
$(".dropDown").not("#fourS").slideUp();
$("#fourS").slideToggle();
});
});
#charset "utf-8";
.selectors {
position: relative;
border-radius: 30px;
}
#one {
background-color: blue;
height: 400px;
width: 100px;
margin-bottom: 10px;
}
#two {
background-color: red;
height: 400px;
width: 100px;
margin-bottom: 10px;
}
#three {
background-color: yellow;
height: 400px;
width: 100px;
margin-bottom: 10px;
}
#four {
background-color: green;
height: 400px;
width: 100px;
}
.dropDown {
background-color: #E9E9E9;
height: 300px;
width: 100%;
position: absolute;
//overflow:auto;
border-radius: 10px;
z-index: 1;
}
#oneS {
display: none;
top: 150px;
}
#twoS {
display: none;
top: 150px;
}
#threeS {
display: none;
top: 150px;
}
#fourS {
display: none;
top: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!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>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jQuery.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="one" class="selectors">
<div id="oneS" class="dropDown"></div>
</div>
<div id="two" class="selectors">
<div id="twoS" class="dropDown"></div>
</div>
<div id="three" class="selectors">
<div id="threeS" class="dropDown"></div>
</div>
<div id="four" class="selectors">
<div id="fourS" class="dropDown"></div>
</div>
</body>
</html>
Four blocks:
Slid out block:
As you can see when the block is slid out, it covers over the red and yellow block. Instead i would like the sliding block to move the red and yellow block down the page, and out from under the sliding block.
There's a few things wrong.
The general issue is that you're fighting the natural behavior of the HTML since the .dropDown elements are children of the .selectors elements. You would get closer to your desired result if they were siblings.
Make them siblings and remove some troublesome CSS properties like position:absolute and top and you should get closer to your desired effect.
Here is a JSBin of a working demo: http://jsbin.com/titibununu/1/edit?html,css,js,output
http://jsbin.com/exUmaFU/1/edit
I love Windows 8, among many of the apps, and one of my favorites is the weather app.
Today I wanted to try making "horizontal page content" as seen on the weather app in the screenshot below.
I was trying to do this using DIV's and haven't any luck. I've tried various methods and whatever I tried using percents this didn't work. I reverted to using em with tables and I got the effect I wanted, but now my problem is getting the div's to have at least 90% width on page width.
Any help would be greatly appreciated as to how this effect can be accomplished.
Simplified Code:
<!DOCTYPE html>
<html>
<head>
<title>Win 8 Horizontal Content Experiment</title>
<meta charset='utf-8'>
<meta content='width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0' name='viewport'>
<link rel='stylesheet' href='http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css'>
<script src='http://code.jquery.com/jquery-1.9.1.min.js' type='text/javascript'></script>
<script src='http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js' type='text/javascript'></script>
<style type="text/css">
body {
background: #000;
}
#contain {
display: inline-block;
position: absolute;
width: 100%;
height: 100%;
overflow-y: hidden;
overflow-x: scroll;
}
#contain table {
height: 100%;
}
#contain td {
width: 100%;
height: 100%;
border: 0px;
padding: 0px;
margin: 0px;
}
/* Separate DIVS Inside Container */
#contain .box {
display: inline-block;
width: 80em;
height: 100%;
background: red;
color: #700;
}
</style>
</head>
<body>
<div id="contain">
<table>
<tr>
<td>
<div class="box">
<center><h1>Page 1</h1></center>
</div>
</td>
<td>
<div class="box">
<center><h1>Page 2</h1></center>
</div>
</td>
<td>
<div class="box">
<center><h1>Page 3</h1></center>
</div>
</td>
<td>
<div class="box">
<center><h1>Page 4</h1></center>
</div>
</td>
<td>
<div class="box">
<center><h1>Page 5</h1></center>
</div>
</td>
<td>
<div class="box">
<center><h1>Page 6</h1></center>
</div>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
(function() {
function scrollMenu(e) {
e = window.event || e;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
document.getElementById('contain').scrollLeft -= (delta*40); // Multiplied by 40
e.preventDefault();
}
if (document.getElementById('contain').addEventListener) {
// IE9, Chrome, Safari, Opera
document.getElementById('contain').addEventListener("mousewheel", scrollMenu, false);
// Firefox
document.getElementById('contain').addEventListener("DOMMouseScroll", scrollMenu, false);
} else {
// IE 6/7/8
document.getElementById('contain').attachEvent("onmousewheel", scrollMenu);
}
})();
</script>
</body>
</html>
Don't use tables. Use inline-block divs with width: 100% and height: 100% inside div with position: relative, white-space: nowrap (this will keep the boxes in one line) and width:100% and height:100%. Make sure you define html, body {width: 100%; height: 100%} in your styles.
I created a jsfiddle with what I think you wanted to do.
http://jsfiddle.net/taW4T/2/
I have this code and it works fine:
Head
<script>
$(document).ready(function()
{
$("#test").resizable({minHeight: 50, minWidth: 50});
});
</script>
Body
<div id="test" style="border: .1em solid black;">
</div>
However when I change my "div" into "iframe" I can't resize it anymore.
Body
<iframe id="test" style="border: .1em solid black;">
</iframe>
Found redsquare's demo a bit wonky when moving the mouse more than a few pixels at a time. I've applied a couple modifications that help make resizing a lot smoother:
<html>
<head>
<style type="text/css">
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
.ui-resizable-helper { border: 75px solid #EFEFEF; margin: -75px; }
</style>
<script type="text/javascript">
$(function() {
$("#resizable").resizable({
helper: "ui-resizable-helper"
});
});
</script>
</head>
<body>
<div class="demo">
<div id="resizable" class="ui-widget-content">
<iframe src="http://pastebin.me/f9ed9b9d36d17a7987e9cb670e01f0e2" class="ui-widget-content" frameborder="no" id="test" width="100%" height="100%" />
</div>
<div>
</body>
</html>
The weirdness of resizing seems to happen because mousemove events don't bubble up from within the iframe. Using a resize handler and a large border in the handler CSS minimizes the effect caused by the iframe as long as the browser can keep up with the mousemove events.
Below Code Work for me in smooth way.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Resizable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
#iframe {
width: 100%;
height: 100%;
border: none;
background: #eee ;
z-index: 1;
}
#resizable {
width: 100px;
height: 100px;
background: #fff;
border: 1px solid #ccc;
z-index: 9;
}
</style>
<script>
$(function() {
$('#resizable').resizable({
start: function(event, ui) {
$('iframe').css('pointer-events','none');
},
stop: function(event, ui) {
$('iframe').css('pointer-events','auto');
}
});
});
</script>
</head>
<body>
<div id="resizable">
<iframe src="test.html" id="iframe">
</div>
</body>
</html>
I think this might be what you are looking for: Place the content of whatever is in your iframe in a div. For this example I will give the div an id of "container".
$('#ID_iframe').css("height", "" + $('#ID_iframe').contents().find("#container").height() + "px");
I landed up here for searchin Resize iframe, But this question is about resizing using Jquery UI plugin, I am just adding a answer so it might be helpful for someone in future who falls into this page searching to resize iframe.
This can be done using only CSS
iframe {
height: 300px;
width: 300px;
resize: both;
overflow: auto;
}
Also all the major browsers have good support. Check out this link and also about the browser support