Below are script that I found on other stackoverflow questions, however it doesn't work.
I want the script to click on play button and then load a video modal.
URL : https://www.scalperstrategy.com/
<body>
<script>
$(document).ready(function(){
$(".mbr-media.show-modal.align-center.py-2").trigger("click");
});``
</script>
Thanks all!
You can use .click() function to achieve the same
$(document).ready(function () {
$("#btnSave").click(
function () {
AlertSave();
}
);
$("#btnSave").click();
});
function AlertSave() {
alert("Alert Message OnClick");
}
jsfiddle
However, if all you are trying to achieve is to call an event that you bind on click, you can just call this event instead.
after adding jquery and below script it finally work
<script type="text/javascript">
$(document).ready(function(){
$(".mbr-media.show-modal.align-center.py-2").trigger("click");
});
</script>
Related
I'm new to Javascript and I have what is probably a pretty basic question. I have some tools tips and want to open them with a click. I create a Javascript call on the click. I can pas the element ID I want to open, but I don't know how to get it to work in the Open call.
<script type="text/javascript">
function opentip(tipID) {
//alert(tipID);
$(#tipID).tooltipster('open');
}
</script>
It's not necessary the function opentip(tipID) to bind the mouse click. I will give you an genereic exemple. You have to import Tooltipster's CSS and JS, and jQuery, so the code will be:
<span class="tooltip" title="Tooltip content!">Target tag</span>
<script>
$(document).ready(function() {
$('.tooltip').tooltipster({
trigger: 'click'
});
});
</script>
When clicl on "Target tag" will appear an tooltip with "Tooltip content!" inside.
The $(document).ready(function() {}); is important to be sure that when the script runs, the browser have already the DOM ready, so the script can find the HTML elements.
You are using JQuery syntax. Insert JQuery plugin and add single quotes in your syntax $('#'+tipID).tooltipster('open'); and add inside document.ready
<script>
$(document).ready(function(){
function opentip(tipID) {
//alert(tipID);
$('#'+tipID).tooltipster('open');
}
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I have links which change content on click. I want one of the links to be cliked on page load and stay as active. Looks like it works in the below fiddle but when I add it on website this one is loaded :
http://jsfiddle.net/0e91svrr/
I think I have some mistake in JS:
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">//<![CDATA[
$(document).ready(function() {
$('a[class^=question]').click(function(e){
e.preventDefault();
var id = $(this).attr("class").replace("question","")
$('.new_member_box_display').html($('#answer' + id).html());
})
document.getElementById("modal").click();
});//end of ready
</script>
The code you have written is perfectly fine. I would just suggest try JQuery's trigger click.
$('#modal').trigger('click');
First of all don't used Pure JS with JQuery mixed up, it look so messy :D also I sugest you think about your tags class and ids :)
Try first add event to links and then call click in document ready like this.
$('a[class^=question]').click(function(e){
e.preventDefault();
var id = $(this).attr("class").replace("question","")
$('.new_member_box_display').html($('#answer' + id).html());
})
$(document).ready(function() {
$("#modal").click();
});
I'm developing a template. While doing so, i encountered a error. I have placed a button that toggles the sidebar from invisible to visible state.I have used the right codes to initiate the jquery response.But the sidebar doesn't toggle.Help me solve this issue
html
<a id="click-slide">
<span>
\
</span>
</a>
Javascript
<script type="text/javascript">
//<![CDATA[
$("#posts-container,a#click-slide").click(function() {
$("#topbar #category").removeClass("category-list-move")
});
$("a#click-slide").click(function() {
$("#sidebar").toggleClass("sidebar-move");
$("#topbar").toggleClass("topbar-move");
$("#posts-container").toggleClass("posts-container-move")
});
//]]>
</script>
My site
i have used it with and without Cdata.Where did i go wrong
You should put your javascript code into document.ready. The reason behind document.ready is you put your javascript code before the a#click-side element. That means when your javascript executed, in the page there is no element called a#click-side. When we put into document.ready it downloads your javascript and all document gently and then starts executing your javascript code.
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$("#posts-container,a#click-slide").click(function() {
$("#topbar #category").removeClass("category-list-move")
});
$("a#click-slide").click(function() {
$("#sidebar").toggleClass("sidebar-move");
$("#topbar").toggleClass("topbar-move");
$("#posts-container").toggleClass("posts-container-move")
});
});
//]]>
</script>
You've not wrapped your code in a document.ready event handler. Change it to this...
jQuery(function($) {
$("#posts-container,a#click-slide").click(function() {
$("#topbar #category").removeClass("category-list-move")
});
$("a#click-slide").click(function() {
$("#sidebar").toggleClass("sidebar-move");
$("#topbar").toggleClass("topbar-move");
$("#posts-container").toggleClass("posts-container-move")
});
});
It was trying to assign the click event handlers before the page was loaded, so none of the elements actually exist at that time. Wrapping in the ready handler, as above, means it will only run the script when the page has finished loading.
Added your code when document gets ready.
<script type="text/javascript">
$(document).ready(function(){
$("#posts-container,a#click-slide").click(function() {
$("#topbar #category").removeClass("category-list-move")
});
$("a#click-slide").click(function() {
$("#sidebar").toggleClass("sidebar-move");
$("#topbar").toggleClass("topbar-move");
$("#posts-container").toggleClass("posts-container-move")
});
});
</script>
I'm trying to build an impression test for a remote usability test using HTML, CSS and jQuery. The user needs to click on a button to start the impression test, which will show the page of the client in an iframe for 5 seconds and then hide itself.
I looked for many codes very similar to this but not exactly what I needed and I can't make it work myself as my jQuery knowledge is yet v poor.
So, what I'm looking for is something like this:
on click show iframe 5000
hide
I tried using this bit of code to show on click with the css iframe {display:none};
<script type="text/javascript">
$(function() {
$("#show").click(function() {
$("#iframe1").show("5000");
});
});
</script>
Thinking "it will show after the click for 5 seconds and then go back to normal display: none.
But no... It shows on click and it stays there.
Can anyone help me?
Here's how you would do it in jQuery:
$(document).ready(function() {
$("#show").click(function() {
$("#iframe1").show().delay(5000).hide(500);
});
});
Fiddle: http://jsfiddle.net/5vC68/
You'll want to use the window.setTimeout event. For example:
$(document).ready( function() {
$('#element').hide();
window.setTimeout(function() {
$('#element').show();
}, 5000);
});
You can swap the hide/show around to suit your needs.
JSFiddle: http://jsfiddle.net/NfCHG/1/
Try this
<script type="text/javascript">
$(function() {
$( "#show" ).click(function() {
$( "#iframe1" ).show().delay(500);
$( "#iframe1" ).show().delay(5000);
});
});
</script>
i want run a php code when a user click a link and change temporarily value of link with output returned by script without reloading page and redirect user to another page
for example if a users click on button :
Click Me!
a code php run for example script.php
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
function doSomething() {
$.get("script.php");
return false;
}
</script>
Click Me!
for example if output of script( $result ) is: 30
then 30 will replaces button: "Click Me!" without reloading page
so at the end after the script is executed i have temporarily instead of "Click Me!" number 30 and if is possible also add a animation gif or something of similar so as: wait wait blinking during execution of script
thanks
Try this, create a class with two methods uW (user wait) uWC (user wait cancel). This class can be reused for future as well
var Util = {
uW:function(id) {
$("#"+id).html("<img src='path to animation GIF' />");
},
uWC:function(id,data) {
$("#"+id).html(data) ;
}
}
Now your function will looks like this
function doSomething() {
Util.uW('clickme'); // clickme is ID of your anchor tag
$.ajax({
url: "script.php",
context: document.body,
success: function(data ){
Util.uWC('clickme',data );
}
});
This might be what you are looking for. I am guessing you want to replace Click Me! with the value returned(30). If not, you can user data inside the function to replace whatever u want
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
function doSomething() {
$el=$(this);
$.get("script.php",function(data){$el.html(data)});
return false;
}
</script>
Click Me!
Click Me!
And the javascript code:
$(function(){
$('#clickme').click(function(){
$(this).load('script.php');
return false;
});
});
You almost have your answers in your question. Use ajax. http://www.w3schools.com/ajax/default.asp you are also using jquery. Jquery has excellent documentation on ajax