I need help. I'm working on a website that's give user a download link to movies.
But I can't get the preview_block div(id) showed up when the mouse is hovered on the movie_block div(id) element. I can't even make the div(preview_block) follow my mouse when I hovered it.
Also, I'm planning to make an AJAX request on the preview_block div(id) to get information about the movie hovered.
Here's my code.
A simpler fiddle example: https://jsfiddle.net/o4xcb9m0/1/
<!DOCTYPE html>
<html>
<head>
<link href="includes/styles.css" />
</head>
<body>
<div class="">
<div id="preview_block" style="display:none"><p>test</p></div>
<table>
<!-- -->
<tr>
<td>
<span id="movie_block"><img src="image-link" alt="<?php echo $movieNameList->data->movies[0]->title; ?>" /></span>
<br>
Movie Name
<br>
</td>
<td>
<span id="movie_block"><img src="image-link" alt="<?php echo $movieNameList->data->movies[0]->title; ?>" /></span>
<br>
Movie Name
<br>
</td>
</tr>
<!-- -->
<tr>
<td>
<span id="movie_block"><img src="image-link" alt="<?php echo $movieNameList->data->movies[0]->title; ?>" /></span>
<br>
Movie Name
<br>
</td>
<td>
<span id="movie_block"><img src="image-link" alt="<?php echo $movieNameList->data->movies[0]->title; ?>" /></span>
<br>
Movie Name
<br>
</td>
</tr>
</table>
</div>
<script src="includes/scripts.js"></script>
</body>
</html>
So, you'd be better off using mouse(enter/leave) events as the hover event bubbles up from within the inner most child (img in your case) to the element (span in your case) the event is registered to. Mouse(enter/leave) events are almost the same as hover except that they don’t react to event bubbling. Therefore they see the entire HTML element they’re registered to as one solid block and don’t react to mouseovers and –outs taking place inside the block.
There is a good interactive demo on the jQuery mouseover docs at the bottom of the page that explains this.
Make sure you change all occurrences of id="movie_block" to class="movie_block" as IDs are supposed to be unique in any given HTML document. They'd make your HTML invalid otherwise.
$(".movie_block").on({
mouseenter: function(event) {
$("#preview_block").css({top: event.clientY, left: event.clientX}).show();
},
mouseleave: function() {
$("#preview_block").hide();
}
});
Here is a demo that has the working code.
And if you wanted the preview block to follow the mouse pointer, then you may use the following.
$(".movie_block").on({
mousemove: function(event) {
$("#preview_block").css({top: event.clientY, left: event.clientX}).show();
},
mouseleave: function() {
$("#preview_block").hide();
}
});
A demo for the above.
So Id's aside here, It seems to me that you are using the hover event when you should be using the mousemove event http://api.jquery.com/mousemove/
Here is a link How to get the coordinates in html using .hover event in jquery?
Hover does not fire continuously. So it won't move with the mouse. How to get the coordinates in html using .hover event in jquery?
In reference to keeping your code clean and easy to get answered, try posting it on jsFiddle like this:
https://jsfiddle.net/o4xcb9m0/1/
<html>
<body>
<div class="">
<a href="foo.com" >Foo
<span class="movie_block">
Bar
<img src="foo" />
</span>
</a>
<div class="preview_block" style="display:none"><p>test</p></div>
</div>
<script>
$(".movie_block").hover(function(event) {
$(".preview_block").css({color: 'red', top: event.clientY + 'px', left: event.clientX + 'px'}).show();
}, function() {
$(".preview_block").hide();
});
</script>
</body>
</html>
Related
In my project,I am using EasyUI.
I have two labels 'AA' and 'BB' whose color changes when I hover over it.Now,I want to do something when Label is clicked.But the click event is not working.
Here is my code:
<script>
function recDoc(){
alert("xietst");
}
</script>
<body style="height:100%">
<style>
.dlgLabel{cursor:pointer}
.dlgLabel:hover {background-color:blue;color:white}
</style>
<div id="dlg" class="easyui-dialog" title=""
style="width:88px;height:260px;top:130px;left:170px;padding:10px">
<label class="dlgLabel" onclick="recDoc()">AA</label><br />
<label class="dlgLabel">BB</label><br />
</div>
</body>
When I delete the class=easyui-dialog,it works.
But I would like for the label to be clickable even when I use easyui. Any help would be great.
You should follow the example as it is on the docs:
http://www.jeasyui.com/demo/main/index.php?plugin=Dialog
I have a jQuery issue I need help with.
On my WordPress site I'm using a jQuery script for search bar. Currently there is a button and on click it shows up a search bar. I want that search bar to be visible by default (always). So I wouldn't have to click on a button, but instead have my search bar visible all the time.
Here is html code:
<div class="top-search-form">
<div class="gdl-search-button" id="gdl-search-button"></div>
<div class="search-wrapper">
<div class="gdl-search-form">
<form method="get" id="searchform" action="<?php echo home_url(); ?>/">
<?php
$search_val = get_search_query();
if( empty($search_val) ){
$search_val = __("Pretraga.." , "gdl_front_end");
}
?>
<div class="search-text">
<input type="text" value="<?php echo $search_val; ?>" name="s" id="s" autocomplete="off" data-default="<?php echo $search_val; ?>" />
</div>
<input type="submit" id="searchsubmit" value="<?php _e("Kreni", "gdl_front_end") ?>" />
<div class="clear"></div>
</form>
</div>
And this is jQuery function:
var search_button = jQuery("#gdl-search-button");
search_button.click(function(){
if(jQuery(this).hasClass('active')){
jQuery(this).removeClass('active');
jQuery(this).siblings('.search-wrapper').slideUp(200);
}else{
jQuery(this).addClass('active');
jQuery(this).siblings('.search-wrapper').slideDown(200);
}
return false;
});
jQuery("#gdl-search-button, .search-wrapper").click(function(e){
if (e.stopPropagation){ e.stopPropagation(); }
else if(window.event){ window.event.cancelBubble = true; }
});
jQuery("html").click(function(){
search_button.removeClass('active');
search_button.siblings('.search-wrapper').slideUp(200);
});
Remove the relevant .click event, and display: block the main search bar container in the CSS.
(this should be enough to get you there)
1.) Remove the jQuery related to search bar show functionality. (eg. click event(s)).
2.) Alter .css file where search elements are display:none; or display:hidden; if a click event is showing them, then mostly likely they are display:none; in the css (more code would be beneficial for this reason). You can comment out the click event for testing by wrapping this at the start <%-- and this at the end --%>
3.) Assure relevant css is now display:block; after step 2.) (But if you remove none; by default it should display)
If this doesn't work show full code or create an online demo with an online IDE like jSfiddle. ;)
I've a problem and I hope that it's possible to explain.
I have a lot of short texts which come from a mysql-DB.
while ($foo = mysql_fetch_object($query)) {
$text = $foo -> column_text_db;
echo '<div class="atextdiv">' . $text . '</div>';
}
now i want to add an onclik-Event-Handler to the "atextdiv"-Container(s) who takes the content and put it on an input-field:
<form>
<input type="text" id="clickcontent" />
</form>
My problem: Each page has a different number of records in database. The final HTML-Code (after parsing the PHP-Code) could be:
<div id="wrapper">
<div class="atextdiv">Papa was a rolling stone</div>
<div class="atextdiv">Oh my god! They killed Kenny</div>
<div class="atextdiv">Foo Bar</div>
<!-- more content -->
</div>
<form>
<input type="text" id="clickcontent" />
</form>
So, how can I get the content of each "atextdiv"-Container after click on it?
Just like:
$(".atextdiv").click(function() {
console.log($(this).text());
});
Use a combination of this and the .text method inside the click handler.
You can bind click event on '.atextdiv' and in event fetch its value using .text()
$('#wrapper').on('click', '.atextdiv', funnction(){
$("#clickcontent").val($(this).text())
})
Just grab the innerHTML of the item that the click event is occurring on:
$('.atextdiv').click(function(e){
alert(e.currentTarget.innerHTML);
})
http://jsfiddle.net/9VE6A/8/
I am rendering two elements on a JSP page dynamically, with dynamic IDs. On mouse over of each element I am rendering a div, and on mouse out I am making the same display value none. The issue is when I hover on the div, the div is keeping on blinking. How can I solve this?
Example code:
<table>
<tr>
<td>
<div onmouseover="showblock(hoverdivid)" onmouseout="hideblock(hoverdivid)">india</div>
<div class="hoverdiv" id="dynamicallygenerated">
<li>a list of checkboxes with state names of the country hovered will be inserted using ajax</li>
</div>
</td>
<td>
<div onmouseover="" onmouseout="">america</div>
<div class="hoverdiv" id="dynamicallygenerated">
<li>a list of checkboxes with state names of the country hovered will be inserted using ajax</li>
</div>
</td>
</tr>
</table>
<script>
var showblock;
var hideblock;
$(document).ready(function (e) {
showblock = function (id) {
$("#" + id).show();
}
hideblock = function (id) {
$("#" + id).hide();
}
});
</script>
Extending my question
i mentioned that am inserting checkboxes in the hover using ajax, in the same hover i have an add button which adds the values that i checked in the hover to some other div outside the table. i have two countries so two hovers with their cites so when i checked and click on add the values of two hovers to be displayed which are checked should display individually suggest me the approach to follow to solve the above requirement
This is happening because when the hoverdiv is shown your mouse is on it thus the mouseleave event is triggered so the hoverdiv disappears and then your mouse is on the first div again so the mouseenter event is triggered so hoverdiv appears again.... and so on.. this causes the flickering
My best suggestion will be to nest the hoverdiv: (You'll have to tweak the css a bit)
<table>
<tr>
<td>
<div onmouseover="" onmouseout="">
india
<div class="hoverdiv"></div>
</div>
</td>
<td>
<div onmouseover="" onmouseout="">
america
<div class="hoverdiv"></div>
</div>
</td>
</tr>
</table>
When the hoverdiv is inside the other div, mouseleave will not be triggered when you hover the hoverdiv
Working Demo http://jsfiddle.net/cse_tushar/FKacT/1
HTML
<table border="1">
<tr>
<td>
<div class="div">india</div>
<div class="hoverdiv" id="dynamicallygenerated">
<li>a list of checkboxes with state names of the country hovered will be inserted using ajax</li>
</div>
</td>
<td>
<div class="div">america</div>
<div class="hoverdiv" id="dynamicallygenerated">
<li>a list of checkboxes with state names of the country hovered will be inserted using ajax</li>
</div>
</td>
</tr>
</table>
css
td{
vertical-align: top;
}
js
$(document).ready(function () {
$('.div').hover(function () {
x = $(this).css('width');
$(this).parent().find('.hoverdiv').show();
$(this).css('width', $(this).parent('td').width());
}, function () {
$(this).css('width', x);
$(this).parent().find('.hoverdiv').hide();
});
});
I want to display tool-tips on my website, and I'm using this code: http://flowplayer.org/tools/demos/tooltip/table.html
I'm using a while loop to create table rows <tr>. Here is how my tool-tip <div> looks like:
<td class="maandgem">€ <?= round($monthavg, 2); ?></td>
<div id="tooltip" class="tooltip">
Shipping: <?= $row['price_shipping']; ?><br />
Price: <?= $row['price']; ?><br /><br />
Total: <?php echo $row['price'] + $row['price_shipping'] + ($row['abo_price'] * $row['abo_time']); ?>
</div>
And this works as planned, it calculates the total price for each <tr>. The problem I'm having is that when I hover over the <td class=maandgem> it always shows the same first tool-tip.
So, each <TD> shows only 1 tool-tip, the first one created. Instead of an unique tool-tip for each row. The PHP part works - there are unique <TD>'s being created. I'm using this code (its the default, I don't understand jQuery much)
$(document).ready(function() {
$(".maandgem").tooltip({
tip: '#tooltip',
position: 'bottom left',
delay: 0
});
});
I'm also including this .js, and I have a basic style sheet for the tool-tip.
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
I guess that's because you use an id for the tooltip, and an id have to be unique, therfore jquery only selects the first one.
Try use a class-attribute instead, and select on that.
Yes, If class will be used instead of ID then it will works on loop also.
I have tested it and working fine.
<link rel="stylesheet" href="jquery-ui-1.10.4.custom.css">
<script src="jquery-1.10.2.min.js"></script>
<script src="jquery-ui-1.10.4.custom.js"></script>
<script>
$(function() {
$( ".show-option" ).tooltip({
show:
{
effect: "slideDown",
delay: 250
},
position:
{
my: "center top",
at: "center"
}
});
});
</script>
</head>
<body>
<h2 class="show-option" title="Testing Tooltip">ToolTip</h2>
</body>