I have a little problem in making a small functionnality using jQuery and ASP.NET MVC 4.
I have a list of thumbnails, wich represents a list of products in my aplication :
<ul class="thumbnails">
#foreach (var thumbnail in Model.ForfaitsInThumbNail)
{
<!-- Now I Display Some infos about the thumbnail -->
<!-- This is the Dialog that I want to display when the cursor is hover every thumbnail -->
<div class='pop-up' id='pop-up'><h3>"#thumbnail.Forfait.Titre"</h3><p>"#thumbnail.Forfait.Description"</p></div>
</div>
<!-- This simply displays a description and the title of every product -->
}
</ul>
Well, I have a jQuery function that displays the pop-up menu customized to display the specific title and description of every product :
<script type="text/javascript">
$('.thumbnail').hover(function (e) {
$('#pop-up').show()
.css('top', e.pageY + 20)
.css('left', e.pageX + 10)
.appendTo('body');
}, function () {
$('#pop-up').hide();
});
$('.thumbnail').mousemove(function (e) {
$("#pop-up").css('top', e.pageY + 20).css('left', e.pageX + 10);
});
</script>
So this function is working well, but it is not satisfying all my needs, because it only displays the title and description of the last thumbnail, but I need a function that narrows every div that have 'thumbnail' and displays it's specefic title and description. Any Ideas ? I would be very thankful for your help :)
Edit
Here is my new function like suggested :
<script type="text/javascript">
$('.pointHere').hover(function (e) {
$(this).children('.pop-up').show()
.css('top', e.pageY + 20)
.css('left', e.pageX + 10)
.appendTo('body');
}, function () {
$(this).children('.pop-up').hide();
});
$('.pointHere').mousemove(function (e) {
$(this).children('.pop-up').css('top', e.pageY + 20).css('left', e.pageX + 10);
});
</script>
I made a div wich has a class pointHere, and when we click to it the child element pop-up is displayed :) that works fine :) but the mouseover function doesn't work, also the hover function doesn't hide the pop-up when the mouse is not hover the pointHere div.
The problem is with the id pop-up. It is not unique. You have the same Id for all of your thumbnails
Instead of binding hover on .thumbnail, bind it on .pop-up and use this to get hold of that div
$('.pop-up').hover(function (e) {
$(this).show()
.css('top', e.pageY + 20)
.css('left', e.pageX + 10)
.appendTo('body');
}, function () {
$(this).hide();
});
Also, you have bad HTML. Your pop-up div is closed twice.
Related
I have created the page in wordpress, it loads each section one at a time on mousewheel event, on mousewheel event the transform property working fine.
But when i bind the click event for transform then at every click it tranform the div at the bottom of screen and then it goes to the section.
Please see this link : Click Here
When you will click on the Testimonials from top right menu bar then it goes at the bottom of screen and then move up-word on the testimonial section.
I am using the below code on click :
jQuery( window ).on( "load", function($) {
//go to specific slider on menu click
var item = document.getElementsByClassName("scroll-custom-js");
jQuery.each( item, function( i, val ) {
this.addEventListener("click",function(e){
var link = jQuery(this).attr('href');
jQuery('.scroll-custom-js').removeClass('arrow-custom');
jQuery(this).addClass('arrow-custom');
gotoSlide(link);
});
});
});
var gotoSlide = function () {
document.querySelector(sliderElement).style.transform = 'translate3d(0, ' + -(currentSlide - 1) * 100 + '%,0)';
document.querySelector(sliderElement).style.transition = 'transform 1000ms ease 0s';
});
In jQuery :
jQuery('a.scroll-custom-js').click(function(e){
var link = jQuery(this).attr('href');
jQuery('.scroll-custom-js').removeClass('arrow-custom');
jQuery(this).addClass('arrow-custom');
e.preventDefault();
var move_slides = jQuery(link).attr('data-slider-index');
move_slides = move_slides - 1;
jQuery('.slides_custom').css({
transform: 'translate3d(0, ' + -(move_slides) * 100 + '%,0)',
});
});
Use unbind() to remove any click event that is bind to that div
jQuery('a.scroll-custom-js').unbind('click').click(function(e){
I have a view that gets an ajax partial view and shows it as a modal popup. The problem is, the partial view has a cancel button on it with a certain id attribute, but its .click javascript event is attached to the main view. so something like this:
Main View
<div>
some_ajax_link
</div>
<div id="partial_container"></div>
<script>
$(document).ready(function () {
$('ajax_link').click(function (e) {
var hiddenSection = $('#partial_container');
hiddenSection.fadeIn()
// unhide section.hidden
.css({ 'display': 'block' })
// set to full screen
.css({ width: $(window).width() + 'px', height: $(window).height() + 'px' })
.css({
top: ($(window).height() - hiddenSection.height()) / 2 + 'px',
left: ($(window).width() - hiddenSection.width()) / 2 + 'px'
})
// greyed out background
.css({ 'background-color': 'rgba(0,0,0,0.5)' });
});
});
$('#partial_container').on('click', '#close_button', function () {
$('#partial_container').fadeOut();
});
</script>
Partial
<div> Some stuff </div>
<button id="close_button">Cancel</button>
The reason I have the cancel button in the partial is for styling purposes, when the button is in the main view it works fine for some reason. I'm confused because when the partial is retrieved it ends up on the same page
EDIT
not sure why theres .appendTo('body'), I got this script somewhere online, is it necessary?
$('#partial_container').on('click', '#close_button', function () {
$('#partial_container').fadeOut();
});
I ended up adding the script on the partial view where the button is
$('close_button').click(function() {
$('modal_popup_id').fadeOut();
});
it seems like when the modal 'fades in' things in the background are disabled temporarily, so the click event is not called when the button is clicked (or any script on the background main view is not triggered)
This question already has answers here:
Popup Window stopped working after jQuery update
(2 answers)
Closed 9 years ago.
I had a working popup script that worked great using
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>.
I am migrating to bootstrap which has me use
<script src="//code.jquery.com/jquery.js"></script>.
Removing the first and using the second causes the popup to become unclosable. It opens but clicking the close button doesn't work. If I go back to the old version of jquery my bootstrap dropdown navigation stops working. How do I get these two to coexist?
Here is the script:
<script type="text/javascript">
$(document).ready(function(){
//When you click on a link with class of poplight and the href starts with a #
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
//Pull Query & Variables from href URL
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
//Fade in the Popup and add close button
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<img src="http://www.bakercommunications.com/images/close_pop.png" class="btn_close" title="Close Window" alt="Close" />');
//Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Fade in Background
$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer
return false;
});
//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove();
}); //fade them both out
return false;
});
});
</script>
I did copy the CSS for the popup into bootstrap.css. The formatting is fine, just the close function doesn't seem to run. This is my first time using this site, so hopefully I have explained it clearly enough. Have wasted a day solving the popup problem, only to have it break the top nav.
$.live was removed in jQuery 1.9, this may be the issue. Try using $.on instead:
$('a.close, #fade').on('click', function() {
I currently have an image displaying when the mouse hovers over a div...
but i only what the image to display next to the mouse if a "div" has a HTML property of "align="center" and if it doesn't then i don't want the image to display?
I think i'm quiet close but i can't figure out how to call the var "divalign" attribute, spent all last night on it :S
$(document).ready(function() {
var $img = $("#MainImage");
$img.hide();
var divalign = $("div").attr("align="center");
$('div').mousemove(function(e) {
$img.fadeIn(0);
$img.offset({
top: e.pageY - $img.outerHeight()-2,
left: e.pageX - ($img.outerWidth()-18)
});
}).mouseleave(function() {
$img.fadeOut(250);
});
});
Thanks in advance.
$('div').mousemove(function(e) {
if ($(this).attr('align') === 'center') {
// only show if the align attribute has value center
$img.fadeIn(0);
$img.offset({
top: e.pageY - $img.outerHeight()-2,
left: e.pageX - ($img.outerWidth()-18)
});
}
}).mouseleave(function() {
$img.fadeOut(250);
});
You have error in this line
var divalign = $("div").attr("align="center");
Change that to
var divalign = $("div").attr("align","center");
It would be cleaner, if you could give these DIVs a class name (ex: class="alignCenter"), then register the event handler on those divs.
$('div.alignCenter').on('mousemove', function(e) {
..........................
});
Try this:
$('div[align="center"]').mousemove(function(e) {
$img.fadeIn(0);
$img.offset({
top: e.pageY - $img.outerHeight()-2,
left: e.pageX - ($img.outerWidth()-18)
});
}
}).mouseleave(function() {
$img.fadeOut(250);
});
I'm attempting to make a menu bar that sticks to the bottom of the screen. Due to it's position on the screen I can't use anchor tags for hyperlinking because in Google Chrome it causes that small link bar to appear in the bottom corner (which overlays ontop of the menu).
As such, each menu icon is a DIV with a unique ID (eg. "profile") and the class "menu-item" is applied to it. Each of these icons will link to a specific page when clicked on (eg. why I want to use the onClick javascript event). However, when each of these icons is hovered over it pops a contextual tooltip (or submenu) above it. Inside this tooltip a further options or links. Consequently, I have come up with the following html construct:
example image located here: http://i.stack.imgur.com/hZU2g.png
Each menu icon will have its own unique onClick link, as well as its own unique submenu/tooltip (which may have more links to different pages).
I am using the following jQuery to pop each submenu:
$(".menu-item").hover(function() {
$('#' + this.id + '-tip').fadeIn("fast").show(); //add 'show()'' for IE
},
function() { //hide tooltip when the mouse moves off of the element
$('#' + this.id + '-tip').hide();
}
);
The issue I'm having is keeping the tooltip visible when the cursor is moved off the icon and onto the submenu/tooltip (currently it disappears the second the icon is no longer hovered on). I want to jQuery fadein and fadeout effects to be applied to the appearance of the tooltip/submenu.
Comments, suggestions, code and jsfiddle examples would be greatly appreciated. Happy to clarify further if I was unclear on any aspects.
Thanks in advance.
You need to wrap the menu-item and tip links in a parent div like so:
<div class="item-wrapper" rel="profile">
<div id="profile" class="menu-item"></div>
<div id="profile-tip" class="tip">
Link1
Link2
</div>
</div>
Then apply the hover function to .item-wrapper and reference the rel attribute (or any other attribute of your choosing):
$(".item-wrapper").hover(function() {
$('#' + $(this).attr("rel") + '-tip').fadeIn("fast").show(); //add 'show()'' for IE
},
function() { //hide tooltip when the mouse moves off of the element
$('#' + $(this).attr("rel") + '-tip').hide();
});
This way when you hover over the links you will still be hovering over the .item-wrapper div.
UPDATE:
To answer your follow-up question, you will need to use setTimeout():
var item_wrapper = {
onHover: function($obj, delay) {
setTimeout(function() {
$('#' + $obj.attr("rel") + '-tip').fadeIn("fast").show(); //add 'show()'' for IE
}, delay);
},
offHover: function($obj, delay) {
setTimeout(function() {
$('#' + $obj.attr("rel") + '-tip').hide();
}, delay);
},
initHover: function($obj, delay) {
$obj.hover(function() {
item_wrapper.onHover($(this), delay);
}, function() {
item_wrapper.offHover($(this), delay);
});
}
};
item_wrapper.initHover($(".item-wrapper"), 1000);
The second argument to setTimeout() is the delay in milliseconds.