Here is my code. The class of .dropdown-menu is menu botton (where release the code when you hover over it) and class .dropdown-menu is its li child
thanks
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.dropdown-toggle').hover(function(){
jQuery(this).children('.dropdown-menu').slideToggle();
});
});
</script>
Related
my jvector maps are in a dropdown menu, it works well in safari, opera and chrome but breaks
(no map
and error message NS_ERROR_FAILURE:
(line 700 in 2.0.2.min.js "return this.node.getBBox();"
in firefox, I've tried lots of different things but no luck.
these are in the head.
<script type="text/javascript" src="jVectormap/jquery-jvectormap-2.0.2.min.js"></script>
<script type="text/javascript" src="../maCountries/be_coord.js"></script>
<script type="text/javascript" src="../maCountries/be_map.js"></script>
this is the html in the dropdown menu
<div id="mapJV">
</div> <!--mapjv container-->
This is the code in be_map.js which breaks in firefox.
$(function() {
var map,
map = new jvm.Map({
container: $('#mapJV'),
map: 'be_mill_en',
backgroundColor: '#F6F3EF',
regionStyle: {
initial: {
fill: '#ABBDC4'
},
},
});
});
$( "<style>.jvectormap-container {width : 400px; height: 400px;}</style>" ).appendTo( "head" );
the code in be_coord.js is just the normal coordinates.
Firefox usually has trouble with rendering SVG inside of the hidden elements. So solution here could be creating and rendering map after its container getting visible.
I am having an Auto refresh Button, when the button is ON a particular part of my web page should get refresh. For example if I've a DIV, when the button is ON the content in this DIV should reload. If the button is OFF, the DIV should remain the same.
I have the coding only when the Auto Refresh Button is ON the whole page is refreshing. Is that possible to refresh a particular part of a Web Page?
Here is my Coding:-
var int=self.setInterval(function(){refreshPage()},60000);
$(document).ready(function() {
var hashTag = window.location.href.split('#');
if (hashTag[1] == 'reload') {
$('#refresh').addClass('refresh-on').html('');
}
$('#refresh').on('click', function() {
$(this).toggleClass('refresh-on');
if ($(this).hasClass('refresh-on'))
$(this).html('Refresh On');
else
$(this).html('Refresh Off');
});
});
function refreshPage() {
if ($('#refresh').hasClass('refresh-on')) {
location.hash = 'reload';
window.location.reload();
} else
location.hash = '';
}
You can use the simple jquery's load() method if you can save the content to be refreshed in a separate page.
put the content to be refreshed in 'content.php'
$("#refreshDIV").load("content.php");
you can call this method whenever required and it can load dynamically.
Indeed the jquery's load() method is a good way to update separated content with external scripts...
Below an example with a little html page which contains 2 divs.
One is refreshing every 1 second and another every 3 seconds...
Divs are using the refreshDiv function to refresh.
The refreshDiv function takes 3 arguments:
div_id: This is the id of the div you want to refresh;
script_file: The script you want to launch to refresh your div; (scripts/ directory);
data: Some data passed to the script (PHP) by GET method;
<html>
<head>
<title>Stack OverFlow - 14302842</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function refreshDiv(div_id, script_file, data) {
var today = new Date();
$("#"+div_id).load("scripts/"+script_file+"?_"+Math.random()+"&data="+data);
}
$(document).ready(function () {
refreshDiv('div1','ls.php','/tmp');
refreshDiv('div2','ls.php','/home');
setInterval(function() {
// Do something every 3 seconds
refreshDiv('div1','ls.php','/tmp');
}, 3000);
setInterval(function() {
// Do something every 1 seconds
refreshDiv('div2','ls.php','/home');
}, 1000);
});
</script>
</head>
<body>
<div id="div1" style="color: #F00; border: 1px solid #F00; text-align: center;">Some Text</div>
<div id="div2" style="color: #00F; border: 1px solid #00F; text-align: center;">Some Text</div>
</body>
</html>
Why doesnt this work?
$(".char").click(function() {
$(this).css('border', "solid 2px red");
});
<img class=char src=1.gif>
<img class=char src=2.gif>
I want it to highlight via border when I click one of the images.
Also I'd like only one to be highlighted at once but I guess I'll look at that after.
use $(document).ready() - your current jquery code executes before the targeted html elements are available in the dom
<script type="text/javascript">
$(document).ready(function() {
$(".char").click(function() {
$(this).css('border', "solid 2px red");
});
});
</script>
Im trying to create a div that will use jquery's lazy load to load images coming in from linkedIn. When I look at the examples found online, they seem to work fine with my browser, but when i try to add it, it doesnt seem to work. I'm not sure if it matters, but i'm developing in Groovy/grails. here is the code i have so far, before rendering:
<html>
<head>
<script type="text/javascript" src="${resource(dir:'js',file:'jquery.lazyload.js')}">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
....
<script type="text/javascript">
$("img").lazyload({
placeholder : "/mgr/images/spinner.gif"
});
</script>
....
</head>
<body>
<div style="width: 150px; height:200px; border:1px solid red; overflow:auto;">
<g:each in="${Friends}" status="i" var="Friends">
<img original=${Friends[3]} src="/mgr/images/spinner.gif">
</g:each>
</div>
This code will only draw the div and display the /mgr/images/spinner.gif image but not the original image. Is there something i'm missing?
thanks for your help
jason
Normally you include the plugin file after the jQuery core file. That way the plugin can extend the jQuery core.
Change:
<script type="text/javascript" src="${resource(dir:'js',file:'jquery.lazyload.js')}">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
To:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="${resource(dir:'js',file:'jquery.lazyload.js')}"></script>
I would also recommend trying to use the newest jQuery core file you can. It may break old plugins but it's well worth attempting as with each update to jQuery come performance enhancements.
jQuery 1.6.4 from Google CDN.
jQuery 1.6.4 from jQuery's CDN.
Also if you want to load some html not just for images using lazy loading plugin you can do easy like that on lazy callbacks
this option "enableThrottle: false", is to ensure your callback is always executed, I had some issues because of this ... sometimes lazy loading wasn't working..
to html add "class="lazy" data-src=" " to an element to section/div/img to call when is displayed to add new html
> $('.lazy').Lazy({
> chainable: false,
> enableThrottle: false,
> onFinishedAll: function () {
> // do what you need ajax call or other
> },
> beforeLoad: function () {
> // do what you need ajax call or other
> },
> afterLoad: function () {
> // do what you need ajax call or other
> },
> onError: function () {
> console.log('could not be loaded');
> }
> });
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>