Setting up a call to external js class - javascript

It may be a simple question, but being a newbie it is hard to get it to run.
So I have this leanModal javascript class, which I want to use for a modal popup.
here is the example paragraph that has to appear once an image is clicked:
<p id="lean_overlay"> Some text to appear</p>
Following is the css that is applied to it:
#lean_overlay {
position: fixed;
z-index:100;
top: 0px;
left: 0px;
height:100%;
width:100%;
background: #000;
display: none;
}
The tutorial of leanModal class says the following:
Step 3: call the function on your modal trigger, as follows. Be sure to set the href attribute of your trigger anchor to match the id of your target element.
$("#trigger_id").leanModal();
What I want to be done is once an img is clicked, the leanModal method to be called, but I got lost in the previous tutorial, in particular which element is a modal trigger and which one is the target element. Moreover, how to call a function once an image is clicked?
any help is much appreciated.

Since you mentioned image is clicked, then you can check its target by
$('img').click(function (e) {
alert(e.target);
});

Related

onClick called on second Click when :active is set on img

Basically what I want to achieve is an clickable image with an active state.
When the image is clicked something should happen and while it is pressed (active) it should display another image.
document.getElementById("scrollbox-table-nav-softer").addEventListener("click", tableNavSofterOnClick);
function tableNavSofterOnClick(){
//doStuff..
}
#scrollbox-table-nav-softer{
max-height: 45px;
position: absolute;
left: 15px;
top: 0;
z-index: 1;
}
#scrollbox-table-nav-softer:active{
content: url("https://www.joomlack.fr/images/demos/demo2/on-top-of-earth.jpg");
}
<img src="http://cdn05.branchez-vous.com/wp-content/uploads/2016/09/bge2-800x410.jpg" id="scrollbox-table-nav-softer"/>
The problem is that when the page is loaded the first click on that element does nothing (the onClick method is not called). On the second click it works as intended (image changes when clicked and the onClick method is executed).
What causes the first click to malfunction?
EDIT:
I managed to fix this issue by adding a class to the CSS :active block like so:
#scrollbox-table-nav-softer:active .elementActive{
content: url("../img/button_softer_active.png");
}
I dont know how or why... but it works now as intended. If someone can explain this to me I would appreciate it.
Quick fix:
You need to change image src on onmouseup and onmousedown events:
<img
onmousedown="document.getElementById('scrollbox-table-nav-softer').src='your_image_1.jpg'"
onmouseup="document.getElementById('scrollbox-table-nav-softer').src='your_image.jpg'"
src="your_image.jpg"
id="scrollbox-table-nav-softer"/>
https://jsfiddle.net/xcmqkcba/1/

Clicking link inside div firing div's onclick

I have this simple issue: a div that contains a link, and the div has an onclick function defined. However, when I click the link, I just want to follow the link, and not fire the containing div's function.
Fiddle
HTML
<div>
Google
</div>
JQuery
$('div').click(function() {
alert("test");
});
CSS
div {
height: 100px;
width: 200px;
border: 1px solid red
}
So here, when I click the div, an alert is shown: that's fine. When the link is clicked, I don't want the alert to show.
How to avoid this?
You can apply event.stopImmediatePropagation(); to the link. According to the API, this keeps the rest of the handlers from being executed and prevents the event from bubbling up the DOM tree (https://api.jquery.com/event.stopimmediatepropagation/).
Here is the fiddle: http://jsfiddle.net/dxrdrqrc/

How do I display a div on button click?

How can I show .quick-links-container on button click?
jsFiddle: http://jsfiddle.net/gnjNq/5/
I had display: none; set but I took it off so you can see the container.
So far I have this but its not working:
$('.quicklinks-button').click(function(){$('#quick-links-container').show();});
You forgot to add the jQuery library on the jsfiddel at the left panel.
Also, you were using an id (#) selector instead of a class selector (.) for quick-links-container.
Try this:
$('.quicklinks-button').click(function(){
$('.quick-links-container').toggle();
});
Living example: http://jsfiddle.net/gnjNq/9/
Your element has that as a class, not an id, you want to show and hide so you need toggle, your fiddle didn't have jQuery added.
$('.quicklinks-button').click(
function () {
$('.quick-links-container').toggle(1000);
}
);
DEMO
try this
demo
$('.quicklinks-button').click(function(){$('.quick-links-container').show();});
.quick-links-container{
right: 20px;
background-color: white;
height: 500px;
width: 200px;
position: absolute;
box-shadow:5px 1px 6px rgba(0,0,0,.2);
}
You didn't succeed because of following reasons:
You didn't include the jQuery in your example file.
You have a class called quick-links-container in your HTML but in your JS you are using #quick-links-container which returns an ID. So that needs to be changed to '.quick-links-container'
You are using only show() on click therefore on click the div will always be set to show, instead you can use toggle() to toggle the visibility of the div.
So, your javascript code needs to be modified to following:
$('.quicklinks-button').click(function(){ $('.quick-links-container').toggle();});
jsFiddle: http://jsfiddle.net/GautamChadha/U5Rwg/
// you must use toggle
// this is jquery
$('#hide').click(function(){
var current = $(this).val();
$('p').toggle();
// this will toggle the value of button from show to hide and vice versa
if(current == 'hide'){
$('#hide').val('show');
}else{
$('#hide').val('hide');
}
});

Making an image change once it is clicked

I’ve already spent hours looking at as many online resources and stackoverflow questions as I can find but for some reason I just can’t figure this out.
I’m attempting to use CSS and image sprites to make a link display as an image that changes once it is hovered over and once it has been clicked. I’ve played round with CSS and looked at JavaScript for far too long now and I just need some direction on how to get it working.
I’ve managed to make it change once its hovered over however what i really need to do is have the image change once it is clicked. So the begin with it displays the play button and when its clicked it displays a pause button, click it again and it displays the play button etc.
From what i can gather i will need to use JavaScript and an onclick event. However I’m not sure how this would work or how to use it with image sprites.
My CSS so far looks like this
.testclass .stratus {
background-position: -1px -1px;
width: 21px;
height: 21px;}.
.testclass .stratus:hover {background-position: -1px -29px; width: 21px; height:
21px;}.
However this only effects the play button and when it is hovered over. Now i need a way to display the pause button when the play button is clicked and vice versa.
Image sprites URL.
http://www.danceyrselfclean.com/wp-content/uploads/2012/12/sprites.png
URL of page im trying to get this to work on.
http://www.priceofmilk.co.uk/uncategorized/ddd-2
Can this be achieved using CSS and HTML or will I also need to use some JavaScript? Any assistance would be much appreciated.
I made a simple example. I use background colors and an anchor but you can easy implement this in your situation.
update
Updated the code so it uses your images.
HTML
<a class="play_pause">PLAY</a>​
CSS
.play_pause {
display: block;
width: 24px;
height: 23px;
text-indent: -99999px;
background: url(http://www.danceyrselfclean.com/wp-content/uploads/2012/12/sprites.png);
cursor: pointer;
}
.playing {
background-position: -27px 0;
}
.playing:hover {
background-position: -27px -28px !important;
}
.play_pause:hover {
background-position: 0 -28px;
}​
And the JS:
$(document).ready(function() {
$(".play_pause").click(function() {
$(this).toggleClass('playing');
});
});​​
​
JsFiddle example
If you only wanted to detect the first click, you could do this in pure CSS by giving the link an id and using the :target pseudoclass (e.g. a#theid:target {...})
But since you need to detect a second click, you'll need to use JS to toggle between CSS classes. The basic way is to use an event handler:
document.getElementById('theid').onclick = function(){
this.className = this.className=='play' ? 'pause' : 'play';
};
You will have to use JavaScript to accomplish the switching, there is no way to accomplish such logic with pure CSS.
The easiest way to go would be to have two classes play and pause. Through CSS you declare which part of the sprite you want to show for each of those classes. Then you attach a click-event listener to the element with JavaScript, and in the click-event callback you remove class play from the element and apply class pause instead, and vice versa.
MDN has a good article on how to attach event-listeners to an element. And this SO question discuss how you can add/remove classes on an element.
That is simple where have you read?
jQuery('.testclass .stratus').click(function{
jQuery(this).toggleClass('played');
})
css:
.played{
background-position: -1px -29px;
}
Example using .querySelectorAll and .addEventListener, with your current sprite. No jQuery is used.
var elm = document.querySelectorAll('.testclass .stratus'), i = elm.length, e;
while (e = elm[--i])
e.addEventListener('click', function () { // this fn generates the listener
var pause = false; // captured in scope, not global
return function () { // this is the actual listener
this.style.backgroundPositionX = (pause = !pause)?'-20px':'0px';
}
}(), false); // the () invokes the generator

How to display file browser from click on text and have mouse cursor change to pointer when hovering text

I'm trying to display a file chooser when a user clicks a link on my page. I've looked around a bit, but still haven't found a complete solution.
I have ruled out binding a listener to the click event on my link and simulating the click event on my form's file field because I've read that Safari doesn't support programmatically clicking on an input[type=file].
Currently I am using the approach where I set the opacity of the file field to 0 and absolute position it over the top of the link, effectively intercepting any clicks on the link. The problem with this is that I can't figure out a way to change the user's cursor when they hover the link since it is obscured by the file input, which doesn't allow for such styling. I have given all immediate parent elements the css style cursor: pointer, but still no luck.
Does anyone have an idea of a different approach I could take in order to get the cursor to change to a pointer on hover of my link? Is my best bet going to be going with something like they have at http://www.uploadify.com/?
EDIT
To explain a little better, I have this file input on my page:
<div class="logo_file">
<input id="logo_file_field" type="file">
</div>
With this css:
.logo_file {
position: absolute; /* this element's parent has position: relative */
top: -65px;
left: 0;
width: 175px;
overflow: hidden;
cursor: pointer;
}
input#logo_file_field {
opacity: 0;
-moz-opacity: 0;
filter: alpha(opacity=0);
cursor: pointer;
}
And I am trying to show the file chooser corresponding to that field when the user clicks this link:
<div class="logo_link_wrap">
<a id="logo_change_link">Change Photo</a>
</div>
Which has this css:
.logo_link_wrap {
margin-top: 38px;
cursor: pointer;
}
Right now I am placing the invisible file field over the link, but the cursor is not turning into a pointer like it should when you hover over a link. The file chooser does display, it's really only the cursor not changing that is holding me up. Thanks
The problem is that you are placing the input field over the link and making the input field invisible by using opacity:0;. But the input field is still there and is blocking the cursor access to the link.
Would it not be better to replace the opacity with display:none?
With display:none you hide the input field and remove it from the flow. I'm assuming that you want the link to be used to active the upload function of the input field, and I'm also assuming that you know how to do that.
Try wrapping the input tag in an anchor tag
<input type="file" ... />

Categories