lets say im on this page
http://MyWebSite.com/users
and there is a link button on this page lets say
<span class="user">
go to page
</span>
If i click on the link it goes to for example
http://MyWebSite.com/users/jake
So now when im on this page there is same button exists and i want to hide it using javascript or jQuery :)
More info: The {$record->url()} in the link is dynamic goes to a page depending on the user, so i must use {$record->url()} in the script to match the current page link
Is this possible?
(I'm on a phone so this is the best I can do for now)
Maybe something like....
if (window.location.href.replace(location.hash,'') == "http://kodeweave.sourceforge.net/editor/") {
$(".nicole").hide()
} else {
$(".michael").hide()
}
You could use jQuery's equals selector to hide any elements that had an href attribute that pointed to your target page using the following code :
// This assumes that the URL will be populated via your server-side code in
// { ... } braces
$('[href="{$record->url()}"]').hide();
likewise, if you just wanted to hide any elements that pointed to the current URL, you could do the same thing via a bit of string concatenation :
// This would hide any elements that point to the current URL
$('[href="' + window.location.href + '"]').hide();
If you can avoid it though, you may want to consider hiding this using server-side code (i.e. using a conditional to determine when certain elements should / should not be rendered).
Related
I am building a website (and I am a novice) and the site has 2 frames. On the left side (frame 1), I have a list of links that when you click on a link it will load a page in frame 2 (right side). But the links are on the left side are actually the result of a query and will change.
Rather than hard coding a site for each link, I want to use one target page to display data. I want to use the link on the left side as a variable value to pass to the right side so I can use the link name in a query on the target page.
MyUniqueLink
Any help would be very appreciated.
In your first <iframe>, you can access the parent document like so:
// window.parent will be undefined if you are not in an iframe.
window.parent.document
Then, as spencer said, it would be easier for you to use document.getElementById("secondFrameId") to get to your second iframe.
Also, the onclick event might be a bit more suited to your needs.
So together the code would look like:
<a onclick="window.parent.document.getElementById('secondFrameId').src='http://example.com'">MyUniqueLink</a>
If you want to access the data in your <a>'s, you should start by giving them an id:
<a id = "myId" href="JavaScript:void(top.frames[2].location.href='Recap.html');" >MyUniqueLink</a>
Then you can grab their data using standard js:
document.getElementById("myId").innerHTML; // grabs MyUniqueLink
document.getElementById("myId").getAttribute("href"); // resolves to href value
Or accomplish the same using jQuery:
$("#myId").html();
$("#myId").attr("href");
If you are dynamically creating the <a>'s in the first place, you can also assign them an id at this point using newElement.setAttribute("id", "someNewId");.
I have a situation where I want to preserve a query string between clicks on my Wordpress website.
E.g.
www.mywebsite.com/?utm_source=mysource
When navigating from this link to another page of the website that query string should persist.
E.g.
www.mywebsite.com/anotherpage/?utm_source=mysource
So I decided one easy way to do this would be to modify the javascript so that my function is fired when a click on an anchor tag occurs.
//Ensures that the query string persists between clicks on the site
$("a").on("click", function (event) {
event.preventDefault();
window.location.href = event.currentTarget.href + window.location.search;
});
However this doesn't work for other elements on the page like buttons which are not anchor tags but still contain hrefs that modifiy the window location when they are clicked. For example in the php scripts of the theme there is code such as:
<button onClick="location.href=www.anotherwebsite.com"</button>
I could implement another function that implements the same behavior for button elements but I am concerned that whenever another element is added I will have to check for a new type. Is there a better way to ensure that whenever the window location is changed my query string persists?
FYI: I am not allowed to put the information in a cookie which is another way I thought of keeping track of the parameters.
several suggestions
client side
In using jquery, it might be easier to just find clickable elements, or have the WordPress theme add css classes, if useful ones aren't there already.
server side
In WordPress, use sessions (but see below), and a rewrite or redirect rule using add_query_arg().
Note about sessions and WordPress: You can't rely on PHP sessions; instead use the database, perhaps via an existing plugin like WP Session Manager or WordPress Native PHP Sessions.
Try this to append query paramters in all anchor tags:-
$('a').each(function() {
var href = $(this).attr('href');
var querystring =
window.location.href.slice(window.location.href.indexOf('?') + 1);
if(href && querystring){
if(querystring.indexOf('=') >= 0)
{
$(this).attr('href', href+'?'+querystring);
}
}
});
I need to get the previous page URL a user has visited and then apply an "active" class to an element on the current page using jQuery.
My website sells telephone numbers so if a user visits a page that sells 0800 numbers then goes to the shop page I want my 0800 anchor link to have an active class
Here is what I have...
$("#range a").each(function () {
if ($(this).attr("href") == document.referrer) {
$(this).addClass("active");
}
});
but the class isn't adding. Is document.referrer the correct way to grab the previous URL?
Thanks
Probably you're using relative paths in your links. document.referrer returns an absolute path. Note that # fragments can also be different among other things that can make the comparison return false. Maybe you should parse document.referrer using the next trick to compare properly with your link href.
https://gist.github.com/jlong/2428561
So I used CBroe's method of Logging both values to the console, and checking to see if the expectation actually matched reality. It turned out the URLs we're different so that's why I wasn't getting an expected result.
First, let me explain what I am trying to accomplish. I currently have 8 small websites that are identical except for a header image and the href links.
I am looking for a way to minimize maintenance and potential for human error each time these pages need updating.
For example, say I have 2 links that point to State specific login pages.
Student Login
Teacher Login
In the past, I have been making copies of the updated HTML, then search and replace "stateId=WA" for "stateId=MI"
I started to see if I could make the URL using javascript and just append the 2 digit State ID using some function. That way I would only have to update the code, then copy it and replace the 2 digit state ID in one place, in one file.
I made progress by using the following external javascript file
function getParam() {
return 'WA';
}
function getLink() {
document.getElementById('studentLogin').href = 'https://www.mypage.com/studentLogin?stateId=' + getParam();
}
function getLink() {
document.getElementById('teacherLogin').href = 'https://www.mypage.com/teacherLogin?stateId=' + getParam();
and then using this in the HTML
CLICK ME
This worked, until I figured out that I can't have more than one element in the HTML with the same id. For example, one of the pages has a link to the Student Login in the Menu, and also has a link to the same place in the main content of the HTML, and only one of them would work.
So I suppose I could create several functions in the external javascript file each with their own ID, then update the HTML to call the new IDs, but I am in search of a better way.
All I really care about is minimizing maintenance, since I currently have 8 of these landing pages, but we could have more in the near future. Since there are only 4 distinct links off of these pages, it would be fine if I could figure out how to store the entire link in a variable, and just call that variable in the
<a> tag
Thank you for your help.
You can add classes to the relevant links, and then get the elements with document.getElementsByClassName("myclass")
test1test2
And in JS:
var links = document.getElementsByClassName("myclass")
This would make links an array containing all the links over which you could iterate to apply your modifications.
Sounds like a job for a progressive enhancement.
I would suggest you add a attribute the html link; data-state-change. Then any future links you write you just add the attribute.
//keep the base url in the tag
<a href="https://www.mypage.com/studentLogin" data-has-state>Click Me<a>
//now using jquery attach to all links that have that data- element.
$('body').on('click', '[data-has-state]', function(e){
// eat the click
e.preventDefault();
//get the url
var url = $(this).attr('href') + '?stateId=' + getParam();
window.location = url;
);
You could do something similar with a css class also instead of an html data- attribute. Then it would be.
$('body').on('click', '.someCssClass', function(e){
// eat the click
e.preventDefault();
//get the url
var url = $(this).attr('href') + '?stateId=' + getParam();
window.location = url;
);
Is ther a Jquery way to combine append() and replaceWith()?
I have a login form in a JQM project, sitting on every site. As multiple pages will be loaded into the DOM, I need to move the long form "along", as the user goes from page to page, to avoid having duplicate form#ids in the DOM.
My question:
I can do like this:
$('.form_in_new_page').replaceWith('.form_in_old_page')
But is there a way to "append and replace", so I can do this with one line of code?
Thanks for help!
EDIT: some more info
Here is my script which I'm running on pagebeforehide:
$('div:jqmData(role="page").basePage').on('pagebeforehide', function(e, data) {
// look for unique elements on the page being left
$(this).find(':jqmData(unique="true")').each(function(){
var uniqueID = $(this).jqmData("unique-id"),
nextPage = data.nextPage,
nextUnique = nextPage.find( ":jqmData(unique-id='"+uniqueID+"')" ),
nextUniqueID = nextUnique.jqmData('unique-id') === uniqueID;
// if a unique element with id=123 is on both from and next page
if ( nextUniqueID == true ) {
// append element from page being left to and replace it on next page
nextUnique.replaceWith( $(this) );
}
});
});
I need to keep my pages inside the DOM in my app. All pages have a login/logout popup, which includes a form and inputs with ids. So if I have 10 pages in my DOM I will have 10 popups with 10 forms and 10x each ID. I'm inserting the popups automatically on every so they are there if the user calls a subpage directly. However as soons as the user goes to the next page I need to make sure the form on the first page appends and replaces the form on the 2nd page.
Hope it's clear now.
The above only replaces the form on the new page, but still leaves it in the old page.
In jquery since functions return this ($) you can chain calls:
$("#selector").replaceWith("<div>Hello</div>").append('<div>test2</div>');
Of corse, that means you need to chain calls in the correct order.