I've got a problem I'm having trying to append a bannercode to the end of an URL. The customer journey is as follows:
Person receives an email which contains a link to a site (SITE1), the URL will contain a banner code e.g. www.site1.com?banner=helloworld
Once the person is on this site, there are 2 buttons which take the customer to a second site:
Button 1 goes to https://www.site2.com/page1
Button 2 goes to same URL/page2
$(document).ready( function () {
var banner = String($.query.get('banner'));
if(banner){
href = $('a[href^="https://"]').attr("href") + "?banner=" + banner;
$('a[href^="https://"]').attr("href", href);
}
});
Basically what happens is, the piece of code I have makes both buttons go to the same URL for example button 1. How can I get the script to not change the URL for all buttons? Thanks in advance.
Do I understand you right: you want to add banner part for every link, but keep the original part unchanged?
$(document).ready(function(){
var banner=String($.query.get('banner'));
if(banner){
$('a[href^="https://"]').attr('href',function(){
return this+'?banner='+banner;
});
}
});
or in shorter:
$(document).ready(function(){
(banner=$.query.get('banner'))?$('[href^=https]').attr('href',function(){
return this+'?banner='+banner}):null;
})
Related
So this has been asked a number of times on here, and while I've read all of the threads I can find, this still isn't working for me.
A little background: I'm working on a Wordpress site with a grid plugin, and I'm trying to trigger a filter when the page loads, depending on a url parameter. For the purpose of this thread I've just hardcoded a url parameter (the category variable) as an example because that functionality is working fine.
The anchor tag I'm trying to trigger:
Tarps and Covers
The broken code I'm trying to use to trigger the click event:
<script type="text/javascript">
$(document).ready(function() {
var hash = window.location.hash;
var category = '55';
var anchor = $("[data-category=" + category + "]");
anchor.click();
});
</script>
A console log returning the anchor variable confirms that I'm selecting the correct jQuery object, and I've also tried anchor[0].click() to trigger it with no success. Does anyone see any problems that I'm overlooking?
I tried it :
$(document).ready(function() {
var hash = window.location.hash;
var category = '55';
var anchor = $("[data-category=" + category + "]");
anchor.click();
anchor.on('click',()=>{
alert();
})
});
Everything is working
Is it possible to click a button to open the same page in a new tab and reveal a hidden div that wasn't seen in the parent?
Currently I have a div called replacediv, that is being replaced with Replacement Text below when users click on the button...But it is being replaced in the parent. For my purpose, I would like to load this same page in a new tab, with the page content and the Replacement Text showing instead of the hidden replacediv.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#replacediv").replaceWith("<span class='style'>Replacement Text</span>");
});
});
</script>
<div id="replacediv"></div>
if you want the content of $("#replacediv") and the span in the same page not replacing one another you do this:
$(document).ready(function(){
$("#replacediv").before("<span style="display:none;" class='style'>Replacement Text</span>");
$("button").click(function(){
$(".style").show();
});
});
I think one way to do it, is when you open the page and add a URL-parameter, which causes the page to render differently, e.g. to replace some text on it, with the Text in the URL-parameter. e.g.
On your page, you define something like this:
$(document).ready(function(){
$("button").click(function(){
window.open(window.location.href + '?replace=Replacement%20Text', '_blank');
});
});
Additionally you need something like this (still in the same page, but active, only when called with a parameter)
$(document).ready(function(){
$("button").click(function(){
window.open(window.location.href + '?replace=Replacement%20Text', '_blank');
});
var arr = location.href.match(/replace=([^&]+)/)
var replace = arr[1];
if (replace != '') {
$("#replacediv").replaceWith("<span class='style'>" + replace + "</span>");
}
});
This version will leave your button still clickable. If you rather do not want a button, you need to ask for the URL parameter earlier and don't render your button in the first place. That is up to you.
Does it go in the right direction? Hope that helps.
I'm trying to have an anchor link, once clicked, show a div. I have a click toggle working on the page, but in addition to that functionality, if a user clicks a sidebar link, I don't want the div to toggle, I just want it to be shown, if hidden. I've tried several if thens, etc - I think this is the closest, but still not working.
Functions (first toggles the h4, the second is my attempt to have the same div shown if a URL is loaded...or the anchor link is clicked):
<script>
$(document).ready(function(){
//Hide (Collapse) the toggle containers on load
$(".toggle_container3").hide();
//Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
$(".trigger3").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
return false; //Prevent the browser jump to the link anchor
}).first().click()
});
</script>
<script>
$(function() {
if ( document.location.href.indexOf('#papers') > -1 ) {
$("#papertoggle").show();
$("h4#papers").addClass("active");
})
});
</script>
Also tried this version, with the keyword either "papers" or "climate_change_test#papers" :
<script type="text/javascript">
// Get URL
var url = window.location.href;
// Get DIV
var msg = document.getElementById('papertoggle');
// Check if URL contains the keyword
if( url.search( 'climate_change_test#papers' ) > 0 ) {
// Display the message
msg.style.display = "block";
}
</script>
HTML of the link:
<li>Papers and Publications</li>
HTML of the h4 and div:
<h4 class="trigger3 dark_grey" id="papers">
Papers and Publications</h4>
<div class="toggle_container3" id="papertoggle"> content </div>
Entire test page:
http://www.sea.edu/sea_research/climate_change_test
This should work:
$("#over_left a").click(function(){
var id = $(this).attr("href");
$(id).toggleClass("active").next().slideToggle("slow");
});
However I would suggest to narrow down the $("#over_left a") selector so it only works on those specific submenu links.
Also tried this version, with the keyword either "papers" or "climate_change_test#papers" :
<script type="text/javascript">
// Get URL
var url = window.location.href;
// Get DIV
var msg = document.getElementById('papertoggle');
// Check if URL contains the keyword
if( url.search( 'climate_change_test#papers' ) > 0 ) {
// Display the message
msg.style.display = "block";
}
</script>
The reason why the above code didn't work, is because it is executed on page load. However, when you click an anchor tag url, the page doesn't reload (it only jumps to the relevant anchor div), so this code is never executed.
Please also be aware that you don't need a complicated search to look for the "#papers" part in your url. You can simply use:
window.location.hash
To find the anchor part at the end of your url.
So combining all of the info from above, you can also create a function that deals with the following example: What if someone shares a link with an anchor url? It should automatically expand already then, right?
// On page load
var anchor = window.location.hash;
// If there is an anchor in the URL, expand the relevant div
if (anchor) {
$(anchor).toggleClass("active").next().slideToggle("slow");
}
I'm wondering whether it is possible to devise a script which will search a webpage for a certain string of text, and then click the link in the element id directly to its right.
Is this possible. Maybe javascript, php?
Please help, and thanks to all that do. :)
#Four_lo
Thanks for your reply. I'm sorry, maybe it's because I'm pretty new to javascript, but I can't really understand anything on the page you suggested.
I put together some javascript which will search the page for an element id and click the link within there.
<html>
<head>
<script type="text/javascript">
function init(){
var linkPage = document.getElementById('linkid').href;
window.location.href = linkPage;
}
onload=init;
</script>
</head>
<body>
GO HERE
I WANT TO CLICK HERE!
</body>
</html>
So basically, I need to search the page for GO HERE. Then, once this is found, I need to click the link in id="thisone", if that makes sense.
The above code works, and clicks the link within the id specified. However, I'd like to find certain text within that id, then move onto the next id, and click the link within that id.
It is possible. It will probably take some finesse but here is where you should start to access String you need. I believe regular expressions will be a must as well.
http://dom.spec.whatwg.org/#processinginstruction
http://domparsing.spec.whatwg.org/
Slightly more complicated than it needs to be:
function performAfterLinkWithText(text, perform) {
// get all the links
var $links = document.getElementsByTagName('a');
// scan them for your text
for(var i in $links) {
if($links[i].innerHTML === text) {
var $next = $links[i] // ready for loop
, terminateAfter = 20 // don't repeat forever
;
// keep checking the adjacent element
// because newlines show up as #text
do {
$next = $next.nextSibling;
} while( !$next.href && terminateAfter-- > 0 );
// do your thing
perform($next.href, $next); // window.location.href = $next.href;
}
}
}
// test -- performAfterLinkWithText('GO HERE', function(url, link) { console.log(url, link); });
performAfterLinkWithText('GO HERE', function(url) { window.location.href = $next.href; });
Or with jQuery:
window.location.href = $('a:contains("GO HERE")').next().attr('href')
I'm working on a blog theme where you can like posts from the theme page. It uses the following javascript to like the post with the tumblr API, change the white heart to a red heart, and also +1 to the post note count, displayed above the like buttons. It works fine, but I have the problem that when you click the heart button, it turns red, likes the post, and +1's to the note count, but you can continue to click the button once it's already liked and it keeps adding one to the note count. Can anyone help me to make it so it's a function that only works once, ex: someone clicks the heart button, it turns red, adds one to the note count, and then is done.
$(function() {
$('.likepost').live('click', function() {
var post = $(this).closest('article');
var id = post.attr('id');
var oauth = post.attr('rel').slice(-8);
var count = parseInt($("#note_count_"+ id).text());
var like = 'http://www.tumblr.com/like/'+oauth+'?id='+id;
$('#like-it').attr('src', like);
$(this).css({"background" : "url(http://static.tumblr.com/uiqhh9x/JYdlzwvnx/like2.png)"});
$("#note_count_"+ id).text(count+1);
return false;
});
});
It's functioning on http://blog.jamescharless.com/, by the way. You have to be logged into tumblr for the script to work.
$("body").one("click", ".likepost", function() {
//your code here
});
By using the .one() function you only allow the click to be triggered one time. It's kind of what it was designed for. Ideally you'd want to use a parent of .likepost closer to it than the body, but worst case you could just use body as the parent.
You can unbind the click event.
$(function() {
$('.likepost').live('click', function() {
var post = $(this).closest('article');
var id = post.attr('id');
var oauth = post.attr('rel').slice(-8);
var count = parseInt($("#note_count_"+ id).text());
var like = 'http://www.tumblr.com/like/'+oauth+'?id='+id;
$('#like-it').attr('src', like);
$(this).css({"background" : "url(http://static.tumblr.com/uiqhh9x/JYdlzwvnx/like2.png)"});
$("#note_count_"+ id).text(count+1);
// unbind
$(this).unbind('click');
return false;
});
});