I have a link in my menu. It has an attributte like title=.roc.
When I click on this link, I want to save this attribute and click on element with the same attribute on the destination page.
Page example.com. I click in the next link.
<li class="menu-item"><a title=".roc" href="https://example.com/port/#flash">Roc</a></li>
So now, in example.com/port/, it should click the element with title=".roc":
<a id="flash" href="#" title=".roc">ROC2</a>
I have this code, but I dont know how pass the attribute instead the hash:
jQuery(function ($) {
var activeTab = document.querySelector(location.hash);
history.replaceState(null, null, ' ');
window.addEventListener('load', function () {
if (activeTab) {
setTimeout(function(){ activeTab.click(); }, 100);
}
})
});
on the pages you want to hook transfer 'title' from:
jQuery(function ($) {
$(document.body).on('click','a[title]', function(event) {
sessionStorage.setItem('title', event.target.getAttribute('title'));
});
});
then on the other page:
jQuery(function ($) {
var activeTab = document.querySelector(`[title="${sessionStorage.getItem('title')}"]`);
window.addEventListener('load', function (event) {
if (activeTab) {
setTimeout(function(){ activeTab.click(); }, 100);
}
})
});
Related
I used ajax to load content from external file (called menu.html). Now I have my menu and when I click on a tag with href to another page which I load with AJAX call where I had my previous content (menu page loaded with ajax).
Here is git repository to this project is: https://github.com/szymonhernik/ArtHer_ajax
//----------- AJAX calls on menu clicks --------------//
(function($) {
"use strict";
var $content,
$section;
function loadMenuLink(url) {
$.ajax(url,{ dataType: "text" })
.then(function(contents){
$content.html(contents);
});
}
function stopScroll() {
$section.on('mousewheel', function() {
//do nothing-> dont load menu.html
});
}
function pageClicked(evt) {
evt.stopImmediatePropagation();
evt.stopPropagation();
evt.preventDefault();
var url = $(this).attr("href");
loadMenuLink(url);
stopScroll();
}
function bindings () {
$(document).on("click", "#menu a", pageClicked);
}
$(document).ready(function () {
$content = $('.content');
$section = $('section');
bindings();
});
})(jQuery);
I have got this small module- firstly to take the url from a tag's href using pageClicked function and then function loadMenuLink when I pass this url.
This is my html code for this page (menu page):
<div id="menu" class="menu animated fadeIn" rel="js-menu">
<div class="menu-bar animated fadeInUp">
<p>O nas</p><span>/</span>
<p>Projekty</p><span>/</span>
<p>Nasi klienci</p><span>/</span>
<p>Kontakt</p>
</div>
</div>
The problem is that after I load menu.html I can't prevent default 'mousewheel' event when I scroll-> I want to do nothing on scroll after I load menu.html.
I will upload my first ajax function, maybe you can find a problem there.
(function($) {
"use strict";
var $section,
$elements,
$content,
$arrow,
$label;
function goToMenu (e) {
e.stopPropagation();
e.stopImmediatePropagation();
e.preventDefault();
if(e.deltaY /120 > 0) {
$('.menu').fadeOut(500, function () { $(this).remove();});
$elements.removeClass("animated fadeOut not-active");
$elements.addClass("animated fadeIn");
}
else if (e.deltaY /120 < 0) {
$.ajax('menu.html',{ dataType: "text" })
.then(function(contents){
$content.html(contents);
$elements.addClass("animated fadeOut not-active");
});
}
}
function arrowToMenu (e) {
e.stopPropagation();
e.stopImmediatePropagation();
e.preventDefault();
$.ajax('menu.html',{ dataType: "text" })
.then(function(contents){
$content.html(contents);
$elements.addClass("animated fadeOut not-active");
});
}
function bindings () {
$section.on('mousewheel', goToMenu);
$arrow.on('click', arrowToMenu);
}
$(document).ready(function () {
$elements = $('.elements');
$section = $('section');
$content = $('.content');
$label = $('.label');
$arrow = $('.arrow');
bindings();
});
})(jQuery);
Here is git repository to this project is: https://github.com/szymonhernik/ArtHer_ajax
Hope that anyone can help me.
I want to make a Clickable button, which waits 10 seconds to load the linked page.
I was wondering if it also needs Href for it ?
If anyone know's how please help me out.
As you have tagged Javascript and not jQuery....
Something like
JavaScript:
function loadUrl(){
window.location.href = "http://www.google.com";
}
Link:
Click My Link
OR
JavaScript:
function delayUrlLoad(url, mils)
{
setTimeout(function() {
window.location.href = url;
}, mils)
}
Link:
Click Here
How about?
HTML:
<button id="yourbutton" href="https://www.google.com">
Click Me
</button>
jQuery/JS:
$( "#yourbutton" ).on( "click", function(event) {
var url = $(this).attr('href');
setTimeout("loadPage(url)", 10000);
event.preventDefault();
});
function loadPage(url){
window.location.href = url;
}
FIDDLE (it wont load the new page in JSFiddle as it is sandboxed, but if you check console, it is indeed attempting to load the page after the timeout).
You'll need to include jQuery to run this code, but this is the idea
Click Me
$("a").on("click", function (event) {
event.preventDefault();
var timeout = setTimeout(function () {
var url = $(this).attr("href");
location.replace(url);
}, 10000);
});
This way:
HTML
<span id="link" data-href="http://www.google.it">click here</span>
JS
$('#link').on('click', function() {
setTimeout(function() {
location.href = $('#link').attr('data-href');
}, 10000);
});
I have the following jQuery code that when a hyperlink is clicked, it downloads the file of the hyperlink href. While it is preparing the file, it displays a please wait message.
The href code is:
<a class="fileDownloadCustomRichExperience" href="pdf.php">Report Download</a>
I want to be able to make the code below run using the $( document ).ready(function() { instead of $(document).on("click")
I tried the ready(function) but couldnt get the href to work.
Any suggestions?
Thanks
$(function () {
$(document).on("click", "a.fileDownloadCustomRichExperience", function () {
var $preparingFileModal = $("#preparing-file-modal");
$preparingFileModal.dialog({ modal: true });
$.fileDownload($(this).prop('href'), {
successCallback: function (url) {
$preparingFileModal.dialog('close');
},
failCallback: function (responseHtml, url) {
$preparingFileModal.dialog('close');
$("#error-modal").dialog({ modal: true });
}
});
return false; //this is critical to stop the click event which will trigger a normal file download!
});
});
* SOLVED BELOW: *
$(function () {
$( document ).ready(function() {
var $preparingFileModal = $("#preparing-file-modal");
$preparingFileModal.dialog({ modal: true });
$.fileDownload('pdf.php', {
successCallback: function (url) {
$preparingFileModal.dialog('close');
},
failCallback: function (responseHtml, url) {
$preparingFileModal.dialog('close');
$("#error-modal").dialog({ modal: true });
}
});
return false; //this is critical to stop the click event which will trigger a normal file download!
});
});
I have a simple tabbed interface that switches between hidden div and sets an active state on the appropriate tab when clicked.
When someone visits the url of the tab, it shows the contents of that tab only, which is fine.
What I need it to do is also set the active state of that tab if you visited that url directly.
I've got url's such as abc.com/index.html#gallery, abc.com/index.html#recipes etc.
So if you visit abc.com/index.html#recipes - the recipes tab is highlighted.
My code is below, thanks in advance for any advice!
$(function () {
var app = {
vars: {
gallery: $('#gallery'),
tabContent: $('.tabs .tabContent'),
nav: $('.tabs nav a')
},
events: function () {
//tabs
app.vars.nav.on('click', function (e) {
var thisHash = $(this).attr('href');
app.setHash(thisHash);
e.preventDefault();
$('nav a').removeClass('active');
$(this).addClass('active');
});
//hashchange
$(window).on('hashchange', function() {
app.checkHash();
});
},
checkHash: function () {
var hash = app.getHash();
if (hash == '') {
app.vars.tabContent.hide();
app.vars.gallery.show();
} else {
app.goTo(hash);
}
},
getHash: function () {
return window.location.hash;
},
setHash: function (id) {
window.location.hash = id;
},
goTo: function (id) {
app.vars.tabContent.hide();
$(id).fadeIn();
}
}
app.events();
app.checkHash();
});
You need to amend the goTo function to set the active class on the relevant tab. Try this:
goTo: function (id) {
app.vars.tabContent.hide();
$(id).fadeIn();
$('nav a[href="' + id + '"]').addClass('active').siblings().removeClass('active');
}
I have below code:
<a href="#" id="#item.Id" name="vote" ><img src="/Content/images/021.png" style="float:left" alt="" /></a>
which invokes an ajax call. on the first call. if the return is true, on the second call I want to make an alert box saying you can do vote only once.
<script type="text/javascript">
$(function () {
$("div.slidera_button a").click(function (e) {
var item = $(this);
e.preventDefault();
$.get('#Url.Action("VoteAjax","Home")', { id: item.attr("id") }, function (response) {
if (response.vote == "false") {
alert("foo.");
} else {
//something
}
});
})
});
</script>
this works, if i click on the button then refresh the page but it doesnt work, if i try to click twice.
I want to the user to be able to click multiple times and only after first one, they get a popup.
why this is not working?
how can i fix it?
EDIT: works in FF.. doesnt work in IE.
How about something like this:
<style type="text/css">
a.disabled {
opacity: 0.5;
/* whatever other styles you want */
}
</style>
<script type="text/javascript">
$(function () {
$.ajaxSetup({ cache: false });
$("div.slidera_button a").click(function (e) {
var item = $(this);
if (item.hasClass("disabled")) {
// alert when they vote
// you'll need to handle some way to add this
// server side to account for page reload, yes?
alert('You may only vote once');
}
$.get('#Url.Action("VoteAjax", "Home")'
, { id: item.attr("id") }
, function (response) {
// if this returns successfully, you voted.
item.addClass('disabled');
}
});
return false;
})
});
</script>
Use this script
<script type="text/javascript">
$(function () {
$("div.slidera_button a").live('click',function (e) {
var item = $(this);
e.preventDefault();
$.get('#Url.Action("VoteAjax","Home")', { id: item.attr("id") }, function (response) {
if (response.vote == "false") {
alert("foo.");
} else {
//something
}
});
})
});
</script>
Or JQuery Delegate method to trigger this click