I think my problem is fairly simple, however I am unable to figure it out. I want to close a note pop up with an "x" icon/div in the top right corner of the note.
Currently I have this as the code. The only solution to minimize the note is to double click on it, which obviously isn't a viable solution.
$('.note').click(function (event) {
$(this).find('.notepopup').show();
});
$('.note').dblclick(function (event) {
$(this).find('.notepopup').hide();
});
I tried changing the second part to target the '.close' div, like this:
$('.close').click(function (event) {
$(this).find('.notepopup').hide();
});
I am beginning to think it has something to do with the relationship between .close and .notepopup - as in - .close is within the popup, whereas .note is in a sense the parent element of .notepopup
Any help would be great. If you really want to get crazy, you can look at what I'm working on: http://www.scottefloyd.com/notewebapp/demo.php
The problem is that you're looking for '.notepopup' inside '.close'. You need $(this).parents('.notepopup'); and that should get the element.
Related
I'm trying to get the style of the icon which I clicked on, in order to get its translate values.
I'm doing this because I want to create a div that will have the same location on the map as the icon who got clicked on.
this is my website so far:
http://www.david-halfon.com/radio/index.html
Basically, each time someone presses the yellow circle, a div should appear around it.
this is the code for events that happen when an icon is being clicked:
locale.on('click', function(e) {
$("#music").attr("src", prop.Url);
$(".player").show();
play();
sendWithAjax(prop.Country, prop.City);
$("h1").html(prop.Station);
$("h2").html(prop.Country);
$("h3").html(prop.City);
//console.log($(this).css("transform"));
//console.log($(this).attr("style"));
console.log($(this));
setTimeout(function(){ $("h4").html(globalVar);}, 500);
$(".plusB").show();
$(".shareB").show();
map1.setView(locale.getLatLng(), 4);
playNow = prop.Station;
playNowCountry = prop.Country
playNowCity = prop.City;
});
The comments are what I have tried to do so far but it does'nt seems to work.
When I'm trying to consloe.log(this) I get 'undefined'.
Thank you!!
The reason why you don't get the expected $(this).css(...) informations is that this is not a regular DOM object, as it clearly appears using Firebug:
The <img> you want to get style from is contained in the _icon member of this object, so you can use e.g.:
console.log($(this._icon).css('transform'));
console.log($(this._icon).attr('style'));
// and so on
This way (tested using Firebug on your website), it works fine.
BTW, I couldn't figure out why the click event targets this object rather than the <img>...
BTW again, this website is a great idea: cool!
I have a problem combining a toggle function with another function involving a change of the css 'position' attribute.
I have a starting page with a menu at the top and columns of pictures beneath it.
Some columns are higher than the window and they can be scrolled down together with the menu (both in position: absolute).
When you click on an item from the menu however, the columns hide and another set of pictures appears (triggered by a click+toggle function). This new set is horizontal and this time I need the menu not to scroll with it.
So what I'm trying to do is to change the position of the menu from absolute to fixed, according to the state of the toggle.
At first I tried including an if/else statement inside my click function but the 'else' part never worked. Now I'm trying to use the callback property of the toggle, but I can't seem to make it work either... The best I can do is get the menu's position switched to fixed, but then it stays that way.
one of the uneffective try-outs:
function fixMenu(){
('.menu').css('position','fixed')};
function freeMenu(){
('.menu').css('position','absolute')};
$("#menu_item").click(function(){
$("#horizontal_set").toggle(1000,fixMenu);
$(".column").toggle(1000,freeMenu);
});
I have no idea whether my problem is in the syntax or if I need a completely different solution. Please enlighten me :-)
Many thanks
PS: I made two little sketches but it appears I'm not allowed to share them :-( I hope my problem remains understandable.
Try this:
It checks via an if-statement if horizontal_set or column is visible. and invokes the correct function as a result.
function fixMenu(){
$('.menu').css('position','fixed')};
function freeMenu(){
$('.menu').css('position','absolute')};
$("#menu_item").click(function(){
$("#horizontal_set").toggle(1000);
$(".column").toggle(1000);
if ( $( "#horizontal_set" ).is( ":visible" ) && $( ".column" ).is( ":hidden" ) )
{
fixMenu();
}
else
{
freeMenu();
}
});
You forgot jQuery selectors in the function. Try:
function fixMenu() {
$('.menu').css('position','absolute');
}
What I am trying to do is have four links that each will display and hide a certain div when clicked. I am using slideToggle and I was able to get it to work with really sloppy and repetitive code. A friend of mine gave me a script he used and I tried it out and finally was able to get something to happen. However, all it does is hide the div and wont redisplay. Also it hides all the divs instead of just the specific one. Here is a jsfiddle I made. Hopefully you guys can understand what I am trying to do and help! Thanks alot.
Here is the script I'm using.
$(document).ready(function () {
$(".click_me").on('click', function () {
var $faq = $(this).next(".hide_div");
$faq.slideToggle();
$(".hide_div").not($faq).slideUp();
});
});
http://jsfiddle.net/uo15brz1/
Here's a link to a fiddle. http://jsfiddle.net/uo15brz1/7/
I changed your markup a little, adding id attributes to your divs. The jquery, gets the name attribute from the link that's clicked, adds a # to the front, hides the visible div, then toggles the respective div. I also added e.preventDefault to stop the browser from navigating due to the hash change. As an aside, javascript don't require the $ prefix.
$(document).ready(function () {
$(".click_me").on('click', function (e) {
e.preventDefault();
var name = $(this).attr('name');
var target = $("#" + name);
if(target.is(':visible')){
return false; //ignore the click if div is visible
}
target.insertBefore('.hide_div:eq(0)'); //put this item above other .hide_div elments, makes the animation prettier imo
$('.hide_div').slideUp(); //hide all divs on link click
target.slideDown(); // show the clicked one
});
});
Welcome to Stack Overflow!
Here's a fiddle:
http://jsfiddle.net/uo15brz1/2/
Basically, you need a way to point to the relevant content <div> based on the link that's clicked. It would be tricky to do that in a robust way with your current markup, so I've edited it. The examples in the jquery documentation are pretty good. Spend some time studying them, they are a great way to start out.
I can't find this seemingly simple answer. I am trying to make an animated button on my site scroll to an anchor point on my site(it's just one huge page)
The code I currently have in the code snippet box in edge doesn't work. It's kind of frustrating because with edge you're not entirely sure where your code is being thrown into the end result.
// insert code for mouse click here
window.scrollTo(0,0);
//want it to scroll to #Main
most of the code in edge starts you off with:
sys.someAction()
Here's my site if you want to look at what I'm trying to do:
www.daniellachman.com
Thanks!
Edit: Here is the full code snippet, provided with the code supplied below:
//Edge binding end
//CUSTOM CODE FROM Monty82
function scrollToTag(tagName) {
var myTag = $("a[name='"+ tagName +"']");
$('html,body').stop(false,false).animate({scrollTop: myTag.offset().top}, 'slow');
}
//Edge binding end
//Original Mouse Clicking Function Provided by Edge
Symbol.bindElementAction(compId, symbolName, "${_newlogoheader}", "click", function(sym, e) {
// insert code for mouse click here
//Stuff I added to call custom function above
sym.scrollToTag("main")
});
It didn't work. But I feel like I'm on the right track.
www.daniellachman.com
If anyone knows how to look at the javascript for the menu nav buttons "about" "contact" and see what that is referencing for the scroll. I'd love to hear it.
This function in JavaScript/jQuery may help you:
function scrollToTag(tagName) {
var myTag = $("a[name='"+ tagName +"']");
$('html,body').stop(false,false).animate({scrollTop: myTag.offset().top}, 'slow');
}
The parameter is the name (not the id but the name) of the anchor to which you want to scroll.
Notice that the function is designed for vertical scrolling, your site seems to require vertical and horizontal, so you may need to use scrollLeft too.
I have seen a lot of websites which "wrapper" width is 960px. As a background image they have an image which is clickable (some kind of advertise) and the whole webpage is over that image, like on this site.
Can you give me tutorial or something on that ?
Tom's code was a huge help, but I needed pointer cursor for this type of ad, but not for all the site, so I came up with this solution:
$('body').bind('click', function(e) {
if ($(e.target).closest('#container').size() == 0) {
alert('click');
}
}).bind('mouseover', function(e) {
if ($(e.target).closest('#container').size() == 0) {
$(this).css('cursor','pointer');
} else {
$(this).css('cursor','default');
}
});
In the first place you put the ad image as the website background then basically you have to capture the click on the whole body and check if it was in-or-outside of the page content. To do that you have to check if the event target element have the content wrapper (or wrappers if there are multiple) as one of its parent nodes - if not it means the click was outside of the page content.
If you'd like to do it here on StackOverflow you could do it with this bit of code.
$('body').bind('click', function(e){
if(!$(e.target).closest('#content').length) {
alert('ad outside content clicked');
}
});
Feel free to try it in your javascript console - SO is using jQuery so it will work - when you will click outside of the content area (at the edges of the screen) you will get alert that ad was clicked.
You'd obviously have to replace the alert with any kind of callback you'd have for your commercial - opening a new web page or whatever
Hope that helps
Tom
ps.
Keep in mind that this example is using jQuery for simplicity not native JS so you'd need the library for it to work.