I'm using a codeigniter for my website. I'd like to have a sound triggered when user clicks the menu. But the page refresh so fast after I click it so that the sound can't be heard. How can I make the page refresh after the sound is completed?
Here is the html:
<ul class="navigation">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
<span id="dummy"></span>
Here is the javascript:
$(document).ready(function(){
$(".navigation").click(function(){
$("#dummy").html("<embed src='<?=base_url()?>sound/testing.mp3' hidden='true' autostart='true' loop='false' />");
});
});
Add a return false inside your function to avoid refresh just after the click.
$(document).ready(function(){
$(".navigation").click(function(){
$("#dummy").html("<embed src='<?=base_url()?>sound/testing.mp3' hidden='true' autostart='true' loop='false' />");
return false;
});
});
i didn't do much work with audio, so Im not sure how the compatibility for this is but your solution should be somewhere along the lines of
$(document).ready(function(){
$(".navigation a").click(function(e){
document.nextPage = $(this).attr('href')
$("#dummy").html("<embed src='<?=base_url()?>sound/testing.mp3' hidden='true' autostart='true' loop='false' onended='followLink();' />");
e.preventDefault();
});
});
function followLink(){
document.location.href = document.nextPage;
}
where you are using the onended event to move on.
update
this is a batter way of doing the same thing http://jsfiddle.net/joshK/d5eNu/
$(document).ready(function(){
$(".navigation a").click(function(e){
var nextPage = $(this).attr('href');
var audioObj = $("<audio>").attr({
"hidden":true,
"src":"<?=base_url()?>sound/testing.mp3"
}).bind("ended",function(){//when sound finished playing follow the link
document.location.href = nextPage;
}).appendTo("#dummy");
audioObj[0].play();
e.preventDefault(); //prevent the page from refreshing
});
});
Related
When I click on the link i want page2.html to appear without any reloading of the current page. Despite all trials, when i click on the link it does reload the entire page before displaying page2.html
<script>
$(document).ready(function() {
$("a").click(function(event) {
var $this = $(this),
url = $this.data("url");
$(document.body).load(url);
event.preventDefault();
});
}); < /script>
homepage.html
<a href="#" data-url="page2.html" class="topic-list-item">
<h3 class="topic-title">Internet Protocol Basics</h3>
<div class="topic-description-text">
Learn how Internet Protocol is used
</div>
</a>
$("a").click(function() {
var $this = $(this),
href = $this.attr("href");
$(document.body).load(href);
location.href = "#" + href;
});
See jQuery.fn.load for more details.
try this code it will work
$(document).ready(function () {
$("a").click(function (event) {
var $this = $(this),
url = $this.data("url");
$(document.body).load(url);
event.preventDefault();
});
});
the problem with Digital's code is that he is not using data function to get url as well when we click on then default action for anchor will be called so we need to stop default action so i used event.preventDefault();
also always put your jquery code between $(document).ready block
I use AJAX on a link to insert data into a certain <div> in the same page. However, if the user right-clicks and opens in a new tab, the new page will contain only the data, without other page elements. How can I do to render a whole page for a right-click-new-tab?
HTML:
<a class=".updateContent" href="...">The link</a>
...
<div id="content></div>
AJAX:
$(document).ready(function() {
$('.updateContent').click(function() {
var url = $(this).attr('href');
$('#content').load(url);
return false;
});
});
Don't use an href. With an href the user has the option to open in a new tab/window or copy/paste no matter what you do (except maybe disable right click entirely but that's annoying). I suggest something like the following:
<a class="updateContent" data-url="...">the link</a>
Then your jQuery
var url = $(this).data('url');
The challenge is to set current menu item as active in magento, which uses Prototype JS and not JQuery.
<ul id="mainmenu">
<li>home</li>
<li><a id="menuItem" href="{{store url='our-cakes'}}">Our Cakes</a></li>
<li>About us</li>
<li>Outlets</li>
<li>Franchise</li>
<li>contact us</li>
</ul>
<script type="text/javascript">// <![CDATA[
document.observe("dom:loaded", function() {
$(mainmenu).childElements().each(function(e){
var h = e.down('a').readAttribute('href');
if(h == window.location){
e.addClassName("current");
}
});
});
// ]]></script>
Here's a refinement of that method. Note that depending on the browser, the href of a link and the window.location.href may have a substring match, but not a full match, because of the rest of the URL which the browser provides from context. Just == is not going to make it.
var here = $$('#mainmenu a').sortBy(function(a){
return a.href.length;
}).reverse().find(function(a){
return window.location.href.include(a.href);
});
if(here) here.up().addClassName('current');
Also, this is looking for the longest match first, so you don't get all of the menu items highlighted on the home link /.
Lets say I have a list where the li are created dynamically, via AJAX :
<ul id="demo-list">
<li data-test="test1" >Test 1</li>
<li data-test="test2" >Test 2</li>
<li data-test="test3" >Test 3</li>
</ul>
When one of the li is clicked, I want to get the data attribute test of that particular li.
I tried something like :
$('#demo-list').on('click', 'li', function() {
console.log($(this).find('li').data('test'));
});
But it obviously gets all the list items and not just the particular one where the event happens.
Also, I know how to do this with .live(), but my question is how to do it via .on()
You have to remove the find from after your $(this) call:
$('#demo-list').on('click', 'li', function() {
console.log($(this).data('test'));
})
You can find the working example bellow:
http://jsfiddle.net/P356B/2/
EDIT:
if you have a widget/plugin that generates that content perhaps you could just attach the click event handler in the plugin. or have a construct such as:
(function($){
$(function(){
$('#demo-list').on('click', 'li', function() {
console.log($(this).data('test'));
})
});
})(jQuery)
I don't think you want find. Just do
console.log($(this).data('test'));
Try to do this :
console.log($(this).data('test'));
check here : http://jsfiddle.net/wDzkW/4/
The jQuery plugin cycle looks for elements of class slideshow. I want to add this class to a <ul> element to make a slideshow out of its <li>s. But when I add the slideshow class to the <ul> element, all <li> disappear and I get no slideshow whatsoever.
The HTML looks like this:
<ul>
<li>
<h3 class="expander">...</h3>
<div class="content">
<p>...</p>
<h4>...</h4>
<ul class="slideshow">
<li>...</li>
<li>...</li>
</ul>
</div>
</li>
...
</ul>
As you see, the slideshow <ul> is included in another list. This parent list consists of headers which reveal the content of each list item on click. I am hiding all the .contents programmatically when the DOM is ready. Then, I add a click listener to the .expanders so they can show the hidden .contents.
It is inside these .contentss that I have .slideshows which use the cycle plugin to cycle through their list items.
The other weird thing about all this is that the slideshow's worked perfectly before I transformed my headers into toggles for their associated content. Indeed, when I added the toggle functionality to the headers, the slides are no longer visible. But then if I take away the slideshow class, they are visible again. Of course, they no longer have slideshow functionnality...
Here is the javascript for all this:
$(document).ready(function()
{
var expanders = $('.expander');
expanders.each(function()
{
$('.content', $(this).parent()).toggle();
$(this).click(function()
{
$('.content', $(this).parent()).toggle("blind", {"easing":"easeInOutCirc"}, "normal");
});
});
$('.slideshow').each(function() {
var parent = $(this).parent();
$(this).cycle(
{
fx: 'scrollHorz',
easing: 'easeInOutCirc',
timeout: 0,
nowrap: 1
});
});
});
Any idea what could be causing this problem?
Apparently, I needed to move the cycle code above the toggle code, like this:
$(document).ready(function()
{
$('.slideshow').each(function() {
var parent = $(this).parent();
$(this).cycle(
{
fx: 'scrollHorz',
easing: 'easeInOutCirc',
timeout: 0,
nowrap: 1
});
});
var expanders = $('.expander');
expanders.each(function()
{
$('.content', $(this).parent()).toggle();
$(this).click(function()
{
$('.content', $(this).parent()).toggle("blind", {"easing":"easeInOutCirc"}, "normal");
});
});
});
I don't know why this works though, so better answers would be appreciated.