I have a jsfiddle here to illustrate my question
http://jsfiddle.net/ttmt/DgnLd/1/
It's just a simple button with a hidden div. The button slide toggles the hidden div.
I would like to have div filled with a random color each time it opens.
At the moment it's picking two random colors - when the div is opening and when the finished opening.
How can I stop the second color and just have one.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">
<style type="text/css">
•{
margin:0;
padding:0;
}
#wrap{
margin:20px;
}
#btn{
width:100px;
height:50px;
background:red;
color:white;
padding:10px;
margin:0 0 50px 0;
}
#infoDiv{
width:500px;
height:300px;
display:none;
}
</style>
</head>
<body>
<div id="wrap">
CLICK
<div id="infoDiv">
</div>
</div>
<script>
$(document).ready(function(){
alert('here');
var color_arr = ['#6faab6','#80c3d1','#888888','#d8e420','#21b4e4','#e4b115','#33ace4'];
$('#infoDiv').hide();
$('#btn').bind('click', function(){
$('#infoDiv').slideToggle('slow', function(){
var ranNum = Math.floor(Math.random()*color_arr.length);
var col = color_arr[ranNum];
$('#infoDiv').css({'background': col});
});
});
});
</script>
</body>
</html>
$(document).ready(function(){
var color_arr = ['#6faab6','#80c3d1','#888888','#d8e420','#21b4e4','#e4b115','#33ace4'];
$('#infoDiv').hide();
$('#btn').bind('click', function(){
var ranNum = Math.floor(Math.random()*color_arr.length);
var col = color_arr[ranNum];
$('#infoDiv:hidden').css({'background': col});
$('#infoDiv').slideToggle('slow');
});
});
Try that -- I've moved your Random color picker out of the SlideToggle callback as that will only run once the slide was finished which from your question I assumed you didn't want.
It also only changes the color of the info div if it's hidden by checking the visible selector, you can read more about that here
Let me know if that works for you
Related
I am trying to place the HOT element with (height:100%) inside position:fixed container.
But the vertical scrolling does not work - only blank rows in FF39, GC44, and IE11.
I have also tried to set dynamically the height of HOT element to the values of parent container, e.g.
var ex = $('#example').parent();
$('#example').height(ex.height());
It works fine in GC and FF, but there are issues with scrolling in IE11. If you move the vertical scrollbar to the bottom, it shows the last row at ~66700. But the last row number should be 100000.
<!DOCTYPE html>
<html>
<head>
<script src="http://handsontable.com/dist/handsontable.full.js"></script>
<link rel="stylesheet" media="screen" href="http://handsontable.com/dist/handsontable.full.css">
</head>
<body>
<div style="position:fixed;top:20px;bottom:0;left:0;right:0; overflow:hidden; border: 1px solid green">
<div style="position:fixed; top:40px;left:5px;right:5px;bottom:5px;border: 1px solid red">
<div id="example" style="overflow:auto; height:100%"></div>
</div>
</div>
<script type="text/javascript">
var data = Handsontable.helper.createSpreadsheetData(100000, 10);
var container = document.getElementById('example');
var hot = new Handsontable(container, {
data: data,
rowHeaders: true,
colHeaders: true,
stretchH: 'all',
contextMenu: true
});
</script>
</body>
</html>
Does anyone know any CSS/layout tricks how to get Handsontable work correctly when using 100% of space of the parent container?
Thanks
I wasn't aware of that bug but to be honest I never use height:100%. Instead, why don't you manually calculate the height using the offset:
let height = $(window).height() - $("#hot-container").offset().top;
And if you want it to always keep the 100% height, even on resize, then add:
$(window).resize(function(){
hotInstance.updateSettings({
height: $(window).height() - $("#hot-container").offset().top;
})
});
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function show1() {
document.getElementById("img1").display = 'block';
}
function hide1() {
document.getElementById("img1").display = 'none';
}
</script>
</head>
<body>
<span onMouseOver="show1()" onMouseOut="hide1()">Corporate Team Outing - LNT</span>
<div id="img1" style="display:none">
<img src="" alt="image 1" />
<img src="" alt="image 2" />
</div>
</body>
</html>
i want that when u put mouse on text it show image in div i m trying to do it but it not working.
Forget javascript for this one! CSS is the answer. Put a hover state on ID:img1 and the images inside the div (if u don't do the latter, mousing over the images will cancel out the div mouse over. So it will look like this (not inline styles due to mouse over states declaration):
#img1 {
Background-image: none;
}
#img1:hover, img1:hover img {
Background-image: url(your URL);
}
You could change the IDs to classes, so the CSS can be reused and keep the IDs for coding (javascript etc)
I've created a PHP file named maps.php that contains a simple Google Maps API that works on the iPad's default browser.
But when I call it using Ajax, the page loads itself but not the map. If I open the link in a desktop or mobile browser it works fine.
You can show google maps by accessing google's javascript api.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
</script>
<script type="text/javascript">
function initialize() {
var myOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
Or you can load any php page directly in webView by using window.location="http://www.mourady.me/alhokair/iphone/maps.php" javascript method, as your php page contain google map in canvas tag, you can not load that in div through ajax call, better way used iframe tag to the job.
<html>
<body onload="bodyload()">
<button onclick="bodyload()">Ajax call</button>
<iframe id="mapDiv" height=500px width=700px src="http://www.mourady.me/alhokair/iphone/maps.php"></iframe>
</body>
</html>
Is this possible ? like I have this phrase on a textbox:
"I went home"
then when I click "home" an options box shows up like:
"I entered home"
|garden|
| motel|
|______|
sorry for my ugly way to show it, couldn't think about anything better lol
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#fieldName").focus(function(){
var el = $(this);
var coords = el.offset();
var div = $("<div>").addClass("dropdown").html("<span>garden</span><span>motel</span>").css({"top":coords.top+18+"px","left":coords.left+45+"px"});
el.after(div);
$(".dropdown span").click(function(){
var newText = "I entered the " + $(this).text();
$("#fieldName").val(newText);
$("div.dropdown").remove();
});
});
});
</script>
<style>
.text {width:120px;}
.dropdown {width:75px; text-align:right; position:absolute; padding:2px; background:#eee; border:1px solid #aaa;}
.dropdown span {display:block; cursor:pointer;}
</style>
</head>
<body>
<input type="text" class="text" name="fieldName" id="fieldName" value="I entered the home" />
</body>
</html>
You'll need a copy of jquery (or point to Google's CDN of it) for this to work. This example's pretty primitive, but hopefully it'll get you where you want to go.
Does anyone know how to modify jquery tools tooltip:
http://flowplayer.org/tools/tooltip.html
to use event special hover:
http://blog.threedubmedia.com/2008/08/eventspecialhover.html
jQuery tools tooltip doesn't rely on hover method, so just loading the plugin is insufficient.
Source for event hover:
http://threedubmedia.googlecode.com/files/jquery.event.hover-1.0.js
Here's the source for jquery tools tooltip:
http://flowplayer.org/js/tools/tools.tooltip-1.1.1.js
I've been trying to get this to work for a while. Thanks in advance.
#Jourkey, What I understood from question is that you want to show the tooltip only when HOVER event is reported by jquery.event.hover plugin. If this is the case then after lot of trial and error I got it like this:
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.event.hover-1.0.js"></script>
<script type="text/javascript" src="tools.tooltip-1.1.1.js"></script>
<style type="text/css">
div.hovering{background-color:yellow;}
div.normal{background-color:white;}
#demotip { display:none; background:transparent url(tooltip/white.png);
font-size:12px; height:60px; width:160px; padding:25px; color:#0505ff;}
</style>
<div id="rect" style="height:200px;width:200px;border:2px blue groove;"
class="normal" title='This is testing tooltip'></div>
<div id="demotip"> </div>
<span id="btnShow" style="border:1px solid black;">click</span>
<span id="btnClose" style="border:1px solid black;">close</span>
JavaScript:
<script type="text/javascript">
var api; //TO TAKE CARE OF TOOLTIP OBJECT
var hovering=false; //TO TRACK IF HOVERING STARTED BY HOVER PLUGIN OR NOT
$(document).ready(function(){
$.tools.tooltip.conf.position=["center","right"];
$.tools.tooltip.conf.api=true;
$.tools.tooltip.conf.effect='fade';
$.tools.tooltip.conf.onBeforeShow = function(a){
return hovering;};
$.tools.tooltip.conf.onBeforeHide = function(a){
return !hoveRing;};
var api = $("#rect[title]").tooltip("#demotip");//CREATE TOOLTIP
$("#btnShow").click(function(){
hovering=true;
api.show();});
$("#btnClose").click(function(){
hovering=false;
api.hide();});
$.event.special.hover.delay = 500;//REPORT HOVER AFTER DELAY OF 500MS
$("#rect").hover(function(){},//HOVER START (BEFORE HOVERING)
function(){
hovering=true;
api.show();}, //HOVERING
function(){
hovering=false;
api.hide();}//HOVER END
);
});
</script>