From what I've read, jquery.attr() is what I need to update the data-attributes of this div. The div contains an audioplayer on the page and the ultimate goal is to update the data-thumb, data-source, data-bgimage, etc. for a div called "ap1"--for now, let's just target successfully updating data-source which contains the location of the mp3 we want to switch to (string).
I am using the following code that is successfully updating the value (per the alert replying 'sounds/song_to_change_to.mp3') however the corresponding player is not being fully updated--only the text-based components are updating in the view but a 'refresh' isn't occurring for the data attributes:
$('#ap1').attr("data-source", r_cont);
alert($('#ap1').attr("data-source"));
r_cont contains a simple string such as 'sounds/song_to_change_to.mp3'.
When the alert runs it shows the name of the new mp3 but the player does not update. Note here that text components are updating in the html (such as $("#activeartist").text(title);) and the changes are viewable immediately. The code I am using initiates the player using the following:
jQuery(document).ready(function ($) {
var settings_ap = {
disable_volume: 'off'
};
dzsap_init('#ap1',settings_ap);
});
I have inserted this into a function which runs when a link is clicked to update the current song playing. The same identical function is used in a script tag right before the </body> to initialize the player with a default song on page load.
This is the div in my html code that presents the original player (with a default song).
<section class="dzsap-sticktobottom">
<div id="ap1" class="audioplayer-tobe" style="width:100%; margin-top:10px; margin-bottom: 10px;" **data-thumb**="img/thumb2.jpg" **data-bgimage**="img/bg.jpg" **data-source**="sounds/itsabeautifulday.mp3">
<div class="meta-artist"><span id="activeartist" class="the-artist">Artist Name</span><span id="activesong" class="the-name">Song Name</span>
</div>
</div>
</section>
When the function runs, the goal is to update the player with the selected song and associated bg image, thumbnail, etc. The function takes as input 6 strings and passes them along but let's for now just pretend it will take as input 1 string which contains the mp3 path.
Note: I'm wondering if ap1 needs to be torn down and reinitialized each time. I tried to use $('#ap1').remove() in the function to tear down the existing div each time a link was clicked and then append the entire div with $("#ap1").html('HTML_AP1_CODE_HERE>') but it only came through as unformatted text.
Related
I am set with a few different tasks. I need a pop up showing loading til the next page which needs the value that the current HTML img has in the onclick even. I have managed to display the loading image but it is on the parent page and not in a pop up, it will show loading then reset the parent page. There is an option to pick multiple values 1-3 but they are all going to the same onclick even in the HTML on the image
onclick="HRT.CODE(1)", onclick="HRT.CODE(2)" ect...
Not much to go on code wise
Currently I am have the following,
HTML
$("a").click(function() {
$(this).after("<img src='Images/loading-logo.gif' alt='loading'/>").show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="RCLookup" name="RCLookup" alt="" src="images/search_icon_resize.png" onload="" onclick="fCW.fS(1);" />
So I tested the theory of the next page displaying with out a value and duplicating the behavior I am getting with the code I currently have and although it needs a value the next page will not even display and I am getting errors in the console. So leaves me to just put the loading img in a separate pop up while the next page is loading and still pass the value from the onclick even in the img HTML to the next page. Maybe an onclick="function(1)" passing to some JS to show the pop up image then call fCW.fS(val) from the function??
To further explain,
I have text that says "Cart(0)" every time someone clicks a button the number increments when I click "Cart" I want it to take me to a new page while sending the text "Cart(1)" (say someone added one item). I want it to show Cart(1) on the next page and pass that value over.
<li><a id="cart" href="cart.html">Cart</a></li>
I have a javascript file that increments and updates that text like so:
function addToCart(){
++cartcount;
document.getElementById("cart").innerHTML = "Cart("+cartcount+")";
}
Now when I click the cart it should take me to another page and still have whatever number beside the cart and store the number in a variable that I can use.
Any help would be greatly appreciated. I saw many questions but they were hard to understand in my context.
So I am working on a website that will have a lot of recipes. I want to have a button that sends whatever recipe is being displayed to that page for printing. However, the way I have each page set up is making this complicated. I have a page for each type and have the recipes displayed via the use of divs and javascript. You click a recipe from a list and that calls a function to make the corresponding recipe go from 'none' to 'block'. Here is my current code
$('.main').each(function() {
if(style.display=="block"){
var divData = $('.card').html();
window.location.href = "print.html";
document.write(divData);
}
});
How can I alter this code so it calls in the one that has its display set to "block"?
You should try using a print stylesheet based on the active recipe class.
Here's more info about print stylesheets
https://css-tricks.com/print-stylesheet-approaches-blacklist-vs-whitelist/
I read from the documentation that we can handle the back button click using the following code:
document.addEventListener("backbutton", backKeyDown, true);
function backKeyDown() {
// Call my back key code here.
alert('go back!');
}
My concern is that I have a single HTML5 web page in which I have multiple div tags which I animate using jQuery as per the navigation option selected by the user from the menu options.
How can I, in this single page webapp, handle the back button click using PhoneGap and show the user the previously animated div. Clicking on the back button again would again take him to the previous div of the current previous div :-)
Thanks.
I solved the problem by creating a global array variable as
var myStack = new Array();
Then whenever I clicked on the div tag, I inserted the function prototype along with the arguments inside the myStack variable. For eg:
myStack.push(\"myfunction(args1, args2);\");
Then, using the code which I posted in my question, inside the BackButton handler, I wrote the following code:
var divToShow = myStack.pop();
eval(divToShow);
Hope this helps others.
I did an implementation in a similarly structured phonegap app. My situation was a bit more complex because I was loading in html as well as external data via ajax (rather than just unhiding divs). I created a global array called history which I used to keep track of current position as well as previous positions (position here being the most recent ajax function called, so the array was actually storing function names as text). The right sequence and combination of .pop and .push array methods got me a fully functioning js back button that scaled nicely and handled any kind of back and forth navigation I could think of.
I will just post my overall idea of handling this situation. Hope you can improvise and change it to suit your needs.
Have a global variable to remember the current div id that is
visible. For example, when a menu item x is clicked, set this global
variable to the div id that is currently visible (before showing the next div corresponding to menu item x).
When the back button is pressed, use the global variable's value to identify the previous div. Hide the current div and show the previous one.
can I cache an empty form template as a second page in browser cache
so that when you click "create event" button on first page it immediately
opens empty form template without having a need to download the template
from the server as it's cached.
Just like CREATE EVENT button in Google calendar; which let's you to switch between calendar and new event form template.
Well, you can either use Javascript for building the new page from scratch when the respective action is invoked (probably quite tedious) or you can use an invisible section (e.g., a separate <div>) of the HTML page (style = display: none) and make it visible by changing its class to a visible style and making the original page invisible (change its style to display: none).
One way to accomplish this would be to load your second view into a hidden container. You can hide it with a simple CSS display property toggle, like this:
<div id="mySecondView" style="display: none;">
<!-- content of second view here -->
</div>
And on button click you can do this to unhide it:
With jQuery:
$('#mySecondView').show();
or
$('#mySecondView').fadeIn();
Without jQuery:
document.getElementById('mySecondView').style.display = '';
Of course you'll have to position the second view via CSS as you want it, otherwise it'll just pop up in some weird place that won't make sense.