I wrote the toggle-accordion. It works good if links and accordion there are on one page, url links works. But how make open my toggle-accordion to url from another page?
https://codepen.io/malinosky/pen/wxKzEo
$(function(){
var accordionFaqHead = $('.i-accordionFaq-head');
accordionFaqHead.on('click', function() {
$(this).next().slideToggle();
});
function accHash() {
var hash = $(this).attr('href');
if (hash) {
var accordionItem = $(hash);
if (accordionItem.length) {
accordionItem.find('.i-accordionFaq-body').show();
}
}
}
$('.i-link-hash').on('click', accHash);
});
You can check if there is hash in the url and call your function with it:
JS:
if (window.location.hash) {
var $hashedElement = $(window.location.hash);
accHash.apply($hashedElement);
}
Use apply to call your function while setting this to be equal to $hashedElement
To add hash while going from page to page you need to add it to your anchor tag first:
HTML:
Related
I am trying to modify a page so that I can reload the content of a div on an interval. This is what I tried:
$("#thediv").load("/thecontent.php");
setTimeout(doPoll,1000);
}
However, using Fiddler reveals that the requests are never made.
Try with this one:
$(document).ready(function() {
setInterval(function() {
$("#thediv").load("thecontent.php");
}, 3000);
});
var content = ''; // file
var element = ''; // id or class
$(window).load(function(){
window.setTimeout("doPoll()",1000);
});
function doPoll(){
(element).load(content);
}
I'am trying to pass a variable/ value from the fancybox iframe to the parent window without success.
Fancybox is launched from a link with
class="fancybox fancybox.iframe"
My code in the fancybox.iframe is:
$(document).ready(function(){
$('.insert_single').click(function(){
var test = $('.members_body').find('{row.U_USERNAME}');
setTimeout(function(){ parent.$.fancybox.close();},300);return true;
});
});
Where '{row.U_USERNAME}' is the username to find in the iframe.
Then, in the parent there's the following code:
$(document).ready(function(){
$('.fancybox').fancybox(
{
openEffect:'fade',
openSpeed:500,
afterClose: function(){
alert($(".fancybox-iframe").contents().find(test));
$('#form input[name=username]').val()(test);return false;
}
}
);
});
But when the fancybox is closed, there's no alert showing up with the variable "test", nor the variable is showing up as a value or as a text in the input field of the form.
I've read and tried various solutions found here on stackoverflow without success.
Thanks in advance for helping
EDIT
Here's an Example
When the fancybox is closed the iframe is removed from the document. So you must use beforeClose event instead of afterClose
$(document).ready(function() {
$('a.fancybox').fancybox({
openEffect:'fade',
openSpeed:500,
beforeClose: function() {
// working
var $iframe = $('.fancybox-iframe');
alert($('input', $iframe.contents()).val());
},
afterClose: function() {
// not working
var $iframe = $('.fancybox-iframe');
alert($('input', $iframe.contents()).val());
}
});
});
JSFiddle: http://jsfiddle.net/NXY7Y/1/
EDIT:
I edited your jsfiddle (http://jsfiddle.net/NXY7Y/9/). Update is in this link
http://jsfiddle.net/NXY7Y/13/
Main page javscript:
$(document).ready(function() {
$('a.fancybox').fancybox({
openEffect:'fade',
openSpeed:500//,
//beforeClose: function() {
// // working
// var $iframe = $('.fancybox-iframe');
// alert($('input', $iframe.contents()).val());
//},
//afterClose: function() {
// // not working
// var $iframe = $('.fancybox-iframe');
// alert($('input', $iframe.contents()).val());
//}
});
});
function setSelectedUser(userText) {
$('#username').val(userText);
}
No need to use afterClose or beforeClose events. Just access the parent function setSelectedUser from the iframe on link click event like this:
$(document).ready(function() {
$('a.insert_single').click(function() {
parent.setSelectedUser($(this).text());
parent.$.fancybox.close();
});
});
Some clarifications :
You should use .find() to find elements by selector (you are trying to find a variable .find(test), which is not a valid format).
You should use .val() to get the contents of an input field or .val(new_value) to set the contents of an input field
You should use .html() or .text() to get the contents of any element other than input,
example: having this html code
<p class="test">hola</p>
... and this jQuery code
var temp = $(".test").html();
... temp will return hola.
On the other hand, if you have control over the iframed page and it's under the same domain than the parent page, then you may not need to set any jQuery in the child page.
so, having this html in the child (iframed) page for instance
<div class="members_body">
<p>GOOGLE</p>
<p>JSFIDDLE</p>
<p>STACKOVERFLOW</p>
</div>
You could set this jQuery in your parent page to get the contents of any clicked element in your child page :
var _tmpvar; // the var to use through the callbacks
jQuery(document).ready(function ($) {
$(".fancybox").fancybox({
type: "iframe",
afterShow: function () {
var $iframe = $('.fancybox-iframe');
$iframe.contents().find(".members_body p").each(function (i) {
$(this).on("click", function () {
_tmpvar = $('.members_body p:eq(' + i + ')', $iframe.contents()).html();
$.fancybox.close();
}); // on click
}); // each
},
afterClose: function () {
$('#form input[name=username]').val(_tmpvar);
}
});
}); // ready
Notice that we declared the var _tmpvar globally so we can use it within different callbacks.
See JSFIDDLE
I have this script which fades in/out the page
(function($) {
$(window).load(function() {
$('#preloader').fadeOut();
$('#wrap').fadeIn();
$("a").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("#wrap").fadeOut(redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});
})(jQuery);
But I have some external links which I don't want to effect so I don't want to target these.
I have found how to test for internal links using this script
var siteURL = "http://" + top.location.host.toString();
var internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../'], a[href^='#']");
But I'm really stuck on how to combine the two! Any ideas please?
I think you use the regex,
Try this,
var patt = new RegExp('(\/|..\/|.\/|#|https:\/\/www.google.co.in)');
var $internalLinks = [];
$('a').each(function(index){
if(patt.test($(this).attr('href'))){
$(this).addClass('fadeclass');
};
})
$('input').click(function(){
$('.fadeclass').fadeOut('slow')
});
Demo JsFiddle
From the above code, I used the regular expression for match the href, when I mentioned external links found then I added the fadeclass. You can use fadeclass whatever.
I am trying to pass url parameters through to the next pages by appending them to all the links on the page. The code I have works fine for this purpose.
I am encountering trouble when having anchor links on the page, as it puts the parameters after the URL and after the anchor as well, preventing the link from going to the anchor point.
Ex. website.com/?param1=test/#anchor?param1=test
Here is my code:
<script type="text/javascript">
jQuery(document).ready( function($) {
var params = window.location.search.replace(/\+/g,'%20');
var button = $('a[href]').each( function(i) {
this.href = this.href + params;
});
});
</script>
Any help would be greatly appreciated!
There you go:
var button = $('a[href]').each( function(i) {
var clearUrl = this.href.split("#");
clearUrl[0] += params;
this.href = clearUrl.join("#");
});
I've got 3 pop-ups on my page. They function using JQuery and the following JS code:
$(document).ready(function() {
$('#open_thanks').click(function(e) {
e.preventDefault();
var tPop = $('.thanks_popup');
tPop.toggle();
});
$('#open_reference').click(function(e) {
e.preventDefault();
var rPop = $('.leave_reference_popup');
rPop.toggle();
});
$('#facebook').click(function(e) {
e.preventDefault();
var fPop = $('.facebook_popup');
fPop.toggle();
});
$('.thanks_popup').append('<div class="close"><div class="inner"><button></button></div></div>');
$('.leave_reference_popup').append('<div class="close"><div class="inner-2"><button></button></div></div>');
$('.facebook_popup').append('<div class="close"><div class="inner-3"><button></button></div></div>');
$('div.inner button').click(function() {
var tPop = $('.thanks_popup');
tPop.toggle();
});
$('div.inner-2 button').click(function() {
var rPop = $('.leave_reference_popup');
rPop.toggle();
});
$('div.inner-3 button').click(function() {
var fPop = $('.facebook_popup');
fPop.toggle();
});
});
My html is quite simple:
Thanks Popup
Open Reference
Open Facebook Popup
I can't figure out how to use hashtag URL navigation to have a pop-up default as open though? Basically, I want to be able to link to index.html#open_thanks and have that pop-up default as open/up.
Thanks.
On page load, parse out any hash values in the url, and then do x.
How to get #hash value in a URL in JS