I'm making a site that uses JavaScript, jQuery, and jPlayer to make an audio playlist. I am still slowly teaching myself JavaScript, so I am a bit confused.
I have a link element on the jPlayer that I want to let the user click and have it load the corresponding post on my music blog. My jPlayer and jQuery code that I included are both written in shorthand so I can't decipher what is actually going on.
The element that I want to change is written as a.jp-playlist-item. Is there an easy way in JavaScript to add an onclick function that will override the default one that jPlayer has set up so I can open a new tab and redirect them to a site?
If you want to look at my site, it's http://www.startingtofeelit.com and the link I'm trying to make is on the top music player.
You should use preventDefault
$(".yourClass").click(function(event) {
event.preventDefault();
// DO SOME STUFF
});
I am sorry for the misunderstanding...
The JQuery selector, was not correct in my last answer.
Just do this:
$(".jp-seek-bar").replaceWith($(".jp-seek-bar").clone())
$(".jp-seek-bar").click(function(){
alert(1);
/*WRITE YOU CODE HERE*/
});
Hope it helps
Related
I have an .aspx page and a separate .js file that contains all of my JavaScript and jQuery. The page also has a UserControl that doesn't exist on page load and that only appears when a certain button is clicked. And the UserControl contains, among other things, a JavaScript button.
The problem I'm having is connecting the newly-created JavaScript button that didn't exist on page load to my .js file.
At first I tried adding a jQuery select to get the button that lives inside the UserControl to the document.ready() that's in my existing .js file like this:
$(".TheClassOnMyUserControlButton").click(function () {
// do stuff here
}
But I couldn't get it to respond to anything I tried. So I put my jQuery inside a <script> tag in the UserControl page itself and the button suddenly started responding.
I have since come to understand that the reason the jQuery select wasn't working from the .js file is because the button didn't exist on page load and you can't select a thing that doesn't exist, and that makes sense now.
So my pseudo-newbie developer brain started trying to figure out how I could refresh the document.ready() in my .js file once the UserControl was on the page so that it would become aware of the newly-created UserControl and its buttons.
I asked another developer that I work with about it and they said to try bind.jquery without explaining how.
Googling that led me here as usual and I saw in the jQuery documentation that their bind() method has been deprecated and they suggest using on() instead.
I think I understand what the other developer meant and I know what I want to do, but I'm getting a little fuzzy on the details and I'm not exactly sure how to use on() to achieve what I'm trying to do.
I know I could just leave the <script> tag inside the UserControl, but I'd like to keep all my JavaScript and jQuery in one place if I can.
Does anyone have any suggestions or things I could try?
I appreciate any help anyone can offer.
Thanks
You have many options to bind an event to a button.
1.) simply write a function and bind it to the button on the event you want. For example:
<script>function doStuff(){
....
}
</script>
<button onclick="doStuff()">Do Something</button>
2.) You have to bind your function at the moment you have created the button. For example:
$('#Container').append('.button');
$('.button').on('event',doStuff);
For a more in depth answer i have to see your code
You can bind jQuery methods or events using the "on" method by looking at the entire document and then in the "on" method specifying the correct selector. Hope that makes sense. You can check the example below.
$(document).on("click", ".className", function (){ /*code here*/ });
Create the button beforehand and hide it. Then, show that button/section/panel on the event of other actions.
C# code behind
control.Visible = false;
control.Visible = true;
or
Jquery/bootstrap front end
$('#myElementID').addClass('hidden');
$('#myElementID').removeClass('hidden');
I am working heavily with iframes, and would like to know if this is possible. Say there is an input with id search. If I hovered over a link (in an iframe) then is it possible to make it so the input would update via some event listener? I am okay with jQuery although I always prefer JS without any libraries. If it isn't possible it's OK with me. Just wanted to know
Is this something you can do with onmouseover? https://www.w3schools.com/jsref/event_onmouseover.asp
Click!
<script>
function hoverMe(x) {
console.log(x);
}
</script>
Then just open a document.write with the iframe to write the function hoverMe to all links.
I have a button on my cover page and I need to assign to it 1 line of javascript code (namely javascript:languageClicked(0); to work with this neat addon: Multilingualizer) .
So the button should execute that line of code and do its usual job, namely to send the user to my main webpage.
thx in advance
Is the languageClicked function code from Multilingualizer? If so, maybe that addon isn't enabled correctly on your page or something and the js files for it are not being loaded.
But, once they are loaded. You can replace your button with this code:
ENTER
Screenshot
Since you want the user to be redirected to /expnew after activating languageClicked.
Hope this helps! Also, there is one catch though; don't change this unless you know for sure you have those JS libraries loaded. ^_^
Without some HTML snippets and the name of the button you are working with, it is hard to know exactly how to help. However, I can share some general knowledge that may provide the answer for you.
The two most common ways that JavaScript triggers are implemented are:
1. <a> "link buttons":
Your code might look something like:
Click me!
2. <input>/<button>/any element onclick events:
Your code might look something like:
<button onclick="javascript:languageClicked(0)">Click me!</button>
We're using JSON in some parts of our PHP project. The edit part has been programmed by JSON, so the href part contains something like below:
Edit
We want to check that if Javascript is disabled then change the URL as follow, because the above link would not work if JS is disabled:
Edit
We tried <noscript>, but we gain no success. how to do something like above, we're stuck here.
I appreciate in advance.
Default to your non-Javascript state, then use Javascript to cancel the following of the link. Users without Javascript will then follow the link, and those that have it enabled will not.
Maybe you can build your page normally using the php link href="./edit.php?id=12&text=some_text_here" and when your document is loaded execute a javascript function that will replace the href attribute of the <a> tag with javascript:void(0);
Example of the function with jquery:
$('a.button').attr('href', 'javascript:void(0);');
If the user doesn't have Javascript then the href attribute won't be updated.
You might want to use what is know as "progressive enhancement". This basically means, you write your HTML as if JavaScript is not enabled, then use JavaScript to enhance the features.
This is usually achieved by attaching events, modifying the DOM etc. within a function that is called on page load.
You can do something like this:
Edit
<script type='text/javascript'>
// ...or however you assign a click handler to the element
document.getElementById('button').onclick = function() {
// Do Javascript stuff here
return false;
};
</script>
If you return false from your click handler, the Javascript-enabled browser will not navigate to the link's location. When Javascript is disabled the link will be followed as normal.
I have been searching for this solution for some time have not found any good solid solutions. Everything I have seen is either 2 years old and does not work.
What I would like to do is use a MC in my flash file to act like a button and when clicked open the sharethis pop up to share this particular video's url. The site API docs really don't touch on Flash working with sharethis.
Any help would do.
Thanks,
Matt
Share This works in HTML,frames and uses javascript.
You would need an external interface to use it. I am not sure we are on the same page when you say live in the swf. You may have to bind it to some object or the sorts to achieve it.
Did you check Barklund.org for their working on ShareThis and ExternalInterface ?
They have broken down the procedure as follows
First, simply go to sharethis.com
publisher section and customize your
widget. Instead of placing the widget
code snippet where you want the
button, put it in the head section
of your website.
<script type="text/javascript" src="http://w.sharethis.com/button/sharethis.js#publisher=636e055b-a4a2-4f9c-872c-b7aa9a701bb0&type=website&send_services=email&post_services=facebook%2Clinkedin%2Cmyspace%2Cdigg%2Cdelicious%2Ctwitter%2Creddit%2Ctechnorati%2Cwordpress%2Cblogger%2Cgoogle_bmarks%2Cwindows_live"></script>
Then create a little javascript
function like:
function share(url, title) {
var s = SHARETHIS.addEntry({
url: url,
title: title
}, {button:false,popup:true});
s.popup()
return false;
}
Finally, simple call this function
from Flash using
ExternalInterface:
var url:String = "http://www.barklund.org/blog/2009/05/06/using-sharethis-with-flash/";
var title:String = "Barklund.org - Using ShareThis with Flash";
import flash.external.ExternalInterface;
ExternalInterface.call("share", url, title);
There are also some comments from the author saying there were problems due to the change in the API but the example worked well for me. If it does not you can check out there Using AddThis with Flash implementation