I have the following scenario..
When the user visit my website I show the user some audio files from the server. When the user clicks on one link, then the jquery function is eventually executed and change the source of the embedded object to selected file.
The codes are given in this link.
I got some answers for this question but the problem isn't solved.
What happening for me is, When I click on the link. The song plays in new page. I need to play the song with embedded object inside the div.
Try this:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
$(document).on('click', "#song", function(e){
e.preventDefault(); //<----------stops to navigate to link
var musicSrc = $(this).attr('href');
$('#music').find('embed').attr('src', musicSrc);
});
});
</script>
note:
make sure to load the jQuery library first:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
Well of course it's not working. The event should be added after the page loads. Using jquery, it would look like this :
<script type="text/javascript">
$(function () {
$(".song").click(function(e) {
$('#mplayer').attr('src', $(this).attr('href'));
e.preventDefault();
});
});
</script>
Related
I have noticed there are a few questions that have been asked on the above topic, however, there hasn't been one for embedded videos. I was hoping someone would be able to help.
Note: My first post - so apologies if i haven't provided the appropriate information!
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".container-fluid").on('click','#issuuclick',function(){
alert("it's working")
})
});
</script>
<div data-configid="26360926/39969074" style="width:525px; height:373px;margin: 0 auto;" class="issuuembed" id="issuuclick"></div><script type="text/javascript" src="//e.issuu.com/embed.js" async="true"></script>
the above is my html embedded and javascript code. The aim here is to automatically open the publication in full spread when the page loads but only the alert is popping up at the moment (I have used a timer).
Would appreciate some assistance!
Try
$(document).ready(function(){
$("#issuuclick").trigger("click");
});
//or
window.onload = function() {
$("#issuuclick").trigger("click");
};
The first example fires as soon as the document is ready to work with and the second example fires when the page is ready and ALL resources are loaded
And attach a click handler to "#issuuclick" like
$(document).on("click", "#issuuclick", function(){
// do something
});
I am trying to force a user to first fill a form which will be in a un-closable modal and once the user enters the data he can get access to the website.
I am refering to this example.
-Example 5: the un-closable window
The modal is working exactly the way I want it but I am unable to make it load with the page.
I dont understand Javascript much thus I am stuck here.
I tried using this -
<script type="text/javascript">
$(document).ready(function() {
$("#ex5").dialog({modal: true});
});
</script>
But this didn't work.
Any help would really be appreciated.
Also please suggest any other un-closable popup modal which I can use instead of the one I have mentioned.
According to the jQuery UI Documentation, you can add the no-close class to the modal dialog to hide the close button.
Also, if your javascript is running too soon with $(document).ready(), you could try $(window).load().
Code included inside $( document ).ready() will only run once the page
Document Object Model (DOM) is ready for JavaScript code to execute.
Code included inside $( window ).load(function() { ... }) will run
once the entire page (images or iframes), not just the DOM, is ready.
http://learn.jquery.com/using-jquery-core/document-ready/
So you could try something like this, and make sure that there is an element with id="ex5".
<script type="text/javascript">
$(window).load(function() {
$("#ex5").dialog({modal: true,
dialogClass: 'no-close'});
});
</script>
Use this code to open modal with page load
<script type="text/javascript">
$(document).ready(function() {
$('#ex5').modal('show');
});
</script>
You find the detailed instructions about Bootstrap modal here http://getbootstrap.com/javascript/#modals
you Have to code like this, refer this coding,
$(document).ready(function () {
var outerThis = this, isCloseable = false;
$('#close-button').on('click', function (e) {
e.preventDefault();
if(outerThis.isCloseable) {
$('#ex5').hide();
outerThis.isCloseable = false;
}
});
});
I am new to jsfiddle. I am trying to leverage the functionality from jsfiddle : http://jsfiddle.net/jhfrench/NQ97h/
The JS piece of it is like this:
$('#myTab a').click(function (e) {
if($(this).parent('li').hasClass('active')){
$( $(this).attr('href') ).hide();
}
else {
e.preventDefault();
$(this).tab('show');
}
});
But, when I try to use this into a normal html folder, only my html stuff works. If someone can show how to convert the external resources, javascript between correct tags, and onload event being called in the jsfiddle into right places, IT WOULD BE REALLY HELPFUL!!
Thanks !!
You're missing DOM ready. In jsfiddle it work because the code is in window.load event. Use DOM read as follows:
//Wait for DOM to load, then run the code enclosed.
$(function() {
$('#myTab a').click(function (e) {
if($(this).parent('li').hasClass('active')){
$( $(this).attr('href') ).hide();
}
else {
e.preventDefault();
$(this).tab('show');
}
});
});
In addition to the adjustment given by user3558931 and as you mentioned in your comment that you want to know how to include the external resources of the fiddle - add the following to your html to include the js- and css-files that are included there:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://appliedinter.net/Workstream/common_files/js/plugins.js"></script>
<script type="text/javascript" src="http://appliedinter.net/Workstream/common_files/js/script.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css"/>
Just In case this is not clear - in case you include the adjusted js code in your html this also has to be wrapped in script-tags:
<script type="text/javascript>
// add code from answer by user3558931 here
// (which I just upvoted as OP hasn't enough rep to upvote)
</script>
Update for the comment: Though it's possible to get the source like suggested in the mentioned youtube video, just want to add: the included external files are displayed clicking on "External Resources" in the left Fiddle menu. Right click on each file, select "copy link target", and include the files as js or css. Similar with the included jquery-version.
I am having this code:
Add
is there any way to make an alert whenever the user will press this button without changing the code or adding onclick event?
You can simple overwrite the attribute with JavaScript:
// Select the targeted element(s), in this case the first <a> element
// Note: You will need to replace this by a code that works
// for your actual markup!
document.getElementsByTagName("a")[0].onclick = function() {
alert("hi");
return false;
};
Demo: http://jsfiddle.net/WNZAP/
As the OP states that they are not allowed to change the HTML, and that jquery is not available to them.
Not having an 'id' on the link makes life very difficult. So the following code presumes the link is the very first one on the page...
Place this javascript into the <head></head> section of your page...
<script type="text/javascript">
window.onload = function() {
document.getElementsByTagName("a")[0].onclick = function() {
alert("Hello World");
return false;
}
}
</script>
See Live JSFiddle Demo
It's not possible to trigger an action without an event. But if I get your question right you want to trigger an alert without changing the HTML.
The easiest way would be by using a JavaScript library like jQuery. So load the library either by downloading it and placing it in your project or through the Google CDN:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
And then do something like this:
<script type="text/javascript">
$(document).ready(function(){
$(".submitme").click(function(){
alert("hello world");
});
});
</script>
I am working in django and have created a class which has a field closed. When the user sets this value for a particular object, then I want to disable all buttons and links on the object_view page.
I am using the following jquery snippet, but it is not working. Can anybody help me find the mistake
<script type="text/javascript">
$("a").css('cursor','arrow').click(function(){
return false;
});
$("input").attr('disabled','disabled');
</script>
Update: Not working means that all the links and input buttons are still working, i.e. being directed to the correct page. I have included this code snippet in my <head> section.
Try:
<script type="text/javascript">
$(document).ready(function(){
$("a").css("cursor","arrow").click(false);
// for jquery older than 1.4.3, use the below line
// $("a").css("cursor","arrow").click(function(){
// return false;
// });
$(":input").prop("disabled",true);
// for jquery older than 1.6, use the below line
// $(":input").attr("disabled","disabled");
});
</script>
You need the $(document).ready(...) so that the code doesn't run until the elements exist on the page.
I guess you could turn off all links (that is anchor tags) with something like this:
$("a").click(function (e) {
e.preventDefault();
});
This should work for buttons and other inputs
$(":input").attr('disabled','disabled');
You need to wrap the whole thing in:
$(function() {
});
OR
$(document).ready(function () {
});
To limit the input to buttons:
$('input[type="button"]').attr("disabled","disabled");
Otherwise you disable all input elements.