I have a content area that gets dynamically loaded with new content when you press the previous or continue buttons. A simple example of html is:
<div id="contentArea"></div>
<nav>
<ul>
<li class="butPrev">Previous</li>
<li class="butNext">Next</li>
</ul>
</nav>
What I used to do in iOS6 is have a mask over the content area on first load that I could click to trigger audio and video and then all other dynamic HTML5 videos would play. I am not sure about iOS7, but iOS8 doesn't allow this. I would have to do it for each page, which defeats the purpose of the mask and is a pain for a user.
As an alternative, I am trying to trigger the play of videos with the next button click. The problem is that the next button captures the dynamic content, loads it into the content area and at that time needs to trigger the play, which iOS doesn't like. Is there any way to wait until the content area is loaded, while staying within the click event so it doesn't get blocked? Here is what I am trying (I have stripped out the Ajax stuff):
var contentLoaded = false;
$('nav li').click(function(){
contentLoaded = false;
//load HTML with HTML5 video via Ajax
//when done, sets contentLoaded = true
triggerAutoplay();
});
function triggerAutoplay() {
if (contentLoaded) {
$('video[autoplay]').each(function(){
if ($('this').attr('autoplay') != "false") {
this.play();
}
});
} else {
setTimeout(triggerAutoplay,100);
}
}
im not sure if i understand you right, but maybe you should call the play in the success of your ajax call like so:
$('nav li').click(function(){
$.ajax({
url: "whatever"
}).done(function() {
//do some stuff
triggerAutoplay();
});
});
function triggerAutoplay() {
$('video[autoplay]').each(function(){
if ($('this').attr('autoplay') != "false") {
this.play();
}
});
}
The play trigger has to be within the click function, so I have to set async to false so that the ajax completes before the function is call like:
$('nav li').click(function(){
$.ajax({
url: "whatever",
async: false
});
triggerAutoplay();
});
function triggerAutoplay() {
$('video[autoplay]').each(function(){
if ($('this').attr('autoplay') != "false") {
this.play();
}
});
}
Related
I have a jquery-mobile popup #graphic-menu activated by an onClick event (getPosition() is in another included script, and works as expected):
HTML
Graphic menu
CSS
function showGM(pos){
$("#menu-buttons").popup("close");
$("#menu-buttons").bind({
popupafterclose: function(event, ui){
$("#graphic-menu").popup("open", {x:pos.x, y:pos.y});
}
});
}
The catch is that #gm-btn is itself part of a parent popup #menu-buttons that:
is called to appear several times
appears at different locations (it's a dragable element)
showGM(pos) uses the position of the #gm-btn when the parent popup first appears, and doesn't change for subsequent child popups when reclicked.
How can I get showGM(getPosition(this)) to correctly recalculate the position of #gm-btn when called (or, more likely, what have I screwed up in my code)?
Edit: at the moment, I'm making things work by storing the position in a variable with global scope (since there's only ever one #menu-buttons active), and passing that to #graphic-menu so it knows where to open. I think this probably isn't good programming practice, so if someone has a better suggestion I'd love to hear about it.
Based on the API (http://api.jquerymobile.com/popup/), they say:
Note: Chaining of popups not allowed: "The framework does not currently support chaining of popups so it's not possible to embed a
link from one popup to another popup. All links with a
data-rel="popup" inside a popup will not do anything at all."
A workaround to get chained popups working is the use of a timeout for
example in the popupafterclose event bound to the invoking popup. In
the following example, when the first popup is closed, the second will
be opened by a delayed call to the open method:
$( document ).on( "pageinit", function() {
$( ".popupParent" ).on({
popupafterclose: function() {
setTimeout(function() { $( ".popupChild" ).popup( "open" ) }, 100 );
}
});
});
In regards to jsFiddle, it works good for this type of testing: https://jsfiddle.net/Twisty/4gjdp4te/7/ You had not set the JQuery library, so I set it to 2.1.3, and retained your JQM 1.4.5 link.
My attempt so far has not yielded the results you want, but you can at least see what direction to take. I plan to keep working on it and will update my answer.
HTML
<div data-role="page">
<div role="main" class="ui-content">
<a id="anchor1" href="#pop-1" data-rel="popup" data-transition="pop">Basic Popup</a>
<div data-role="popup" id="pop-1" data-position-to="#anchor1">
<p>This is a basic popup.</p>
<button id="firstbutton" data-rel="popup">Button to open 2nd popup</button>
</div>
<div data-role="popup" id="pop-2">
<p>This is another basic popup.</p>
</div>
</div>
</div>
JQUERY
var buttonClick = false;
$(document).on("pageinit", function () {
$("#pop-1").on({
popupafterclose: function () {
if (buttonClick) {
console.log("Opening 2nd Popup.");
setTimeout(function () {
$("#pop-2").popup("open", {
positionTo: "#pop-1"
})
}, 100);
buttonClick = false;
} else {
console.log(buttonClick);
}
}
});
});
$(document).ready(function () {
$("#firstbutton").click(function () {
buttonClick = true;
console.log("First Button clicked");
$("#pop-1").popup("close");
});
});
EDIT
I got the code you need: https://jsfiddle.net/Twisty/4gjdp4te/8/
JQUERY
var buttonClick = false;
$(document).ready(function () {
$("#pop-1").popup({
afterclose: function(){
if (buttonClick) {
console.log("Opening 2nd Popup.");
setTimeout(function () {
$("#pop-2").popup("open", {
positionTo: "#pop-1"
})
}, 100);
buttonClick = false;
} else {
console.log(buttonClick);
}
}
});
$("#firstbutton").click(function () {
buttonClick = true;
console.log("First Button clicked");
$("#pop-1").popup("close");
});
});
i have a website with tags system like kind of the system that work on stackoverflow.
my questions about it is:
$("#area1 ul li").hover(function(){
var width= $(this).offset();
$(".flyout").css({"top":width.top+19,"left":width.left});
$(".flyout").toggle();
setTimeout(function() {
$.ajax({
url: web + "sources/queans/sql.php", type: "POST",
data: {
action: "taginfo",
tag: $(this).text(),
token: t,
ajax: "1"
},
success: function (output) {
$(".flyout").html(output);
}
});
}, 2000);
$(".flyout").html('<center><img style="margin-top:20px;" src="http://www.cloudynights.com/public/style_images/master/ajax_loading.gif" /> </center>');
});
Do this Jquery script is wait 2 seconds while the mouse are hover
the element?
if user remove the mouse hover the element do the query will still
running and execute the code? if no how can i stop the code before
it require from sql.php file data?
Do this Jquery script is wait 2 seconds while the mouse are hover the element?
Not exactly, once a user has hovered over the element, a timer is started and 2 seconds later the action is performed. The user does not have to remain hovering the element for this to happen.
if user remove the mouse hover the element do the query will still running and execute the code?
As specified above, the action will execute 2 seconds after first hovering the element, regardless of what the user does thereafter.
if no how can i stop the code before it require from sql.php file data?
Capture the result of the call to setTimeout into a variable (commonly called timerId or similar), and call clearTimeout(timerId) when the user stops hovering the element.
See the following simplified demo.
var timerId;
$('.container').hover(function(){
$('.message').text('Hover has been started, background will change in 5 seconds. Mouse out to cancel');
var $this = $(this);
timerId = setTimeout(function(){
$this.css('background-color','red');
},5000);
},
function(){
clearTimeout(timerId);
$('.message').text('Action cancelled');
});
.container{
width:300px;
height:300px;
border: 1px solid black
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div>Hover over me</div>
<div class="message"></div>
</div>
.hover() usually takes two arguments, handlerIn and handlerOut functions. As you have only one function, it will be invoked when the mouse pointer enters the element. My understanding is that you're displaying some pop-up next to element with some loading icon on hover, that's good because giving some visual feedback to the user encourages him to stay on that element.
setTimeout(callback,2000) will invoke that callback after waiting for minimum 2sec (it can be more - no guarantee on that ;)) but if the user leaves the element you're still firing the Ajax call without tracking that mouseleave event. So pass another function to hover() which will be invoked when the user leaves the element.
/* two variables outside hover scope to
hold reference to setTimeout & Ajax call*/
var timer, ajaxRequest;
$("#area1 ul li").hover(function(){
var width= $(this).offset();
$(".flyout").css({"top":width.top+19,"left":width.left});
$(".flyout").toggle();
timer = setTimeout(function() {
ajaxRequest = $.ajax({
url: web + "sources/queans/sql.php", type: "POST",
data: {
action: "taginfo",
tag: $(this).text(),
token: t,
ajax: "1"
},
success: function (output) {
$(".flyout").html(output);
}
});
}, 2000);
$(".flyout").html('<center><img style="margin-top:20px;" src="http://www.cloudynights.com/public/style_images/master/ajax_loading.gif" /> </center>');
},
function(){
// second callback to handle mouseleave
if(typeof ajaxRequest !== 'undefined'){
// abort the ongoing Ajax call
ajaxRequest.abort();
}else if(typeof timer !== 'undefined'){
// timeout callback is not invoked yet, so clear it
clearTimeout(timer);
}
// show some message in flyout or close the popup directly
});
i create a nav on my site. Navigation works good but when i back on the main site all script from js file doesn't work. Script for my nav:
var default_content="";
$(document).ready(function(){
//Ajax navigate
checkURL();
$('footer a').click(function(){
checkURL(this.hash);
});
default_content = $('#login_box').html();
setInterval("checkURL()",250);
.........
Methods:
var lasturl="";
function checkURL(hash)
{
if(!hash) hash=window.location.hash;
if(hash != lasturl)
{
lasturl=hash;
if(hash=="")
$('#login_box').html(default_content);
else
loadPage(hash);
}
}
function loadPage(url)
{
url=url.replace('#page','');
$.ajax({
type: "POST",
url: "include/help4meApi.php",
data: 'page='+url+'&tag=navigation',
dataType: "html",
success: function(msg){
if(parseInt(msg)!=0)
{
$('#login_box').html(msg);
}
}
});
}
Problem is when i back to the main site scripts doesn't work.
the issue comes from here $('#login_box').html(default_content);. When u calle the .html() the event binded within the element will be cleaned.
When you backspace, back to the main page, the event handler is already not there, so you have to register it again
//For show and hide register values
$("#registerInputsBtn").click(function(){
$(".register_information").hide(1000);
$(".register_values").show(1000);
$("#firstname").focus();
});
register again on the piece of code that you assign the content to #login_box. For example the quick fix:
if(hash==""){
$('#login_box').html(default_content);
$("#registerInputsBtn").click(function(){
$(".register_information").hide(1000);
$(".register_values").show(1000);
$("#firstname").focus();
});
}
but here the codes are not DRY :( rearrange the flow on how the page load and the register the event in the correct flow is recommended.
I've got this function:
$(document).ready(function() {
$('.post_button, .btn_favorite').click(function() {
//Fade in the Popup
$('.login_modal_message').fadeIn(500);
// Add the mask to body
$('body').append('<div class="overlay"></div>');
$('.overlay').fadeIn(300);
return false;
});
My page loads content with favourite buttons, but after Ajax call and generated additional new content the function doesn't work when you click new content's buttons. What could be not right?
That is because you are using dynamic content.
You need to change your click call to a delegated method like on
$('.post_button, .btn_favorite').on('click', function() {
or
$("body").on( "click", ".post_button, .btn_favorite", function( event ) {
Instead of this:
$('.post_button, .btn_favorite').click(function() {
do this:
$(document).on('click','.post_button, .btn_favorite', function() {
on will work with present elements and future ones that match the selector.
Cheers
class-of-element is the applied class of element. which is selector here.
$(document).on("click", ".class-of-element", function (){
alert("Success");
});
If you know the container for .post_button, .btn_favorite then use
$('#container_id').on('click', '.post_button, .btn_favorite', function () { });
so if '.post_button, .btn_favorite' are not found then it will bubble up to container_id
else if you don't know the container then delegate it to document
$(document).on('click', '.post_button, .btn_favorite', function () { });
Reference
I am not sure if I am getting your question right but you may want to try..
$.ajax({
url: "test.html"
}).done(function() {
$('.post_button, .btn_favorite').click(function() {
//Fade in the Popup
$('.login_modal_message').fadeIn(500);
// Add the mask to body
$('body').append('<div class="overlay"></div>');
$('.overlay').fadeIn(300);
return false;
});
Just try to paste your code inside done function.
Hope it helps :)
EDIT:
I also notice you are missing }); on your question.
The following worked for me
$(document).ready(function(){
$(document).bind('contextmenu', function(e) {
if( e.button == 2 && jQuery(e.target).is('img')) {
alert('These photos are copyrighted by the owner. \nAll rights reserved. \nUnauthorized use prohibited.');
return false;
}
});
});
You need to bind the jQuery click event once your ajax content is replaced old content
in AJAX success block you need to add code like here new response html content one a tag like
Click Me
So you can bind the new click event after change the content with following code
$("#new-tag").click(function(){
alert("hi");
return false;
});
I have the following code which loads content into a div, then fades in:
$('a.search').click(function(){
$('.pop-up').load('search.php', function(){
$(this).fadeToggle();
});
});
However, I'm assuming this is making a request each time the a.search is clicked, if it is a toggle?
Is there a more economic way to achieve this toggle without making multiple calls?
Implement the toggle in your own code instead of using .fadeToggle.
$('a.search').click(function(){
if ($('.pop-up').is(':visible')) {
$('.pop-up').fadeOut();
} else {
$('.pop-up').load('search.php', function(){
$(this).fadeIn();
});
}
});
You can check for one time loading by setting a global variable.Assuming that your pop-up div style is set to display:none, example code is provided below:
var isPopUpLoaded = false;
$('a.search').click(function(){
if(isPopUpLoaded==false){
$('.pop-up').load('search.php', function(){
isPopUpLoaded = true;
});
}
$('.pop-up').fadeToggle();
})
;