I have the following jQuery Code which I'm using to show or hide a particular section from the page:
<script>
if(location.search == "?show=success"){
$('.step, #step1').hide();
$('.success').show();
location.hash = 'ka?show=success';
}
if(location.search == "?show=successtwo"){
$('.step, #step1, #FlowFour2').hide();
$('.success-two').show();
location.hash = 'ka?show=successtwo';
}
</script>
It actually works, but in the process also adds extra parameters to the final URL.
So if I access http://example.com/ka/?show=success, I get redirected to http://example.com/ka/?show=success#ka?show=success
Can someone help in this please?
Related
I have website, created with Elementor. Website belongs to photographer. He has got there an Elementor Multigallery, with filter at the top. I need to create external links, which can bring you to the subpage and directly show only filtered items.
Here's the link to multigal: https://chosephoto.com/photo/
I need to do something like that, when I enter the https://chosephoto.com/photo/#fashion I will received the current subpage, but it will shows only images from gallery "fashion". Not all images.
I thought about imitating jQuery click by query string (get the value of /#....) and then do the jquery click the with attribute, which equals the value in query string, However I even don't know, how can I do it with jQuery. I am jQuery beginner.
Thank you for a help.
So, finally, here's my "solution"
$ = jQuery;
$(window).bind('load', function() {
var hash = $(location).prop('hash').substr(1);
if(hash == 'portrait') {
$('a[data-gallery-index=0]').trigger('click');
} else if (hash == 'fashion') {
$('a[data-gallery-index=1]').trigger('click');
} else if (hash == 'product') {
$('a[data-gallery-index=2]').trigger('click');
} else if (hash == 'sky-photo') {
$('a[data-gallery-index=3]').trigger('click');
} else {
$('a[data-gallery-index=all]').trigger('click');
}
});
I had to use .bind('load'), instead of document.ready() function, because the gallery do the additional javascript after the document is ready (and it has overwritten my code).
You can call the filter with getting the URL, based on the hashtag at the end. For example this URL: https://chosephoto.com/photo/#fashion will filter the FASHION gallery.
My knowledges are not enough, to do it better way. But it works!
I have a site that uses jQuery to hide or display content in response to pressed buttons, so people can find the content they are looking for more quickly. However, I would like to be able to link targeted users to the page with particular types of content already displayed.
In simplest terms, the page is structured as follows:
<!DOCTYPE html>
<html>
<script src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(window).load(function(){
$("#b1").click(function(){
$(".type1").show();
$(".type2").hide();
});
$("#b2").click(function(){
$(".type1").hide();
$(".type2").show();
});
$(".type1").hide();
$(".type2").hide();
})
</script>
<body>
<button id="b1">1</button>
<button id="b2">2</button>
<div class="type1">This content is shown when button 1 is pressed.</div>
<div class="type2">When button 2 is pressed this content is shown.</div>
</body>
</html>
If I want to be able to send Person A a link to the site with the "type1" div initially displayed, and Person B a link to the same site with the "type2" div initially displayed, what is the most practical solution?
Please note: I am self taught programmer, and while I have done a lot of searching on this site, this is my first time asking a question. So I apologize in advance if there is anything wrong or odd with my question or formatting that I might otherwise be aware of.
I assume that the way you are giving your site link to Person A and Person B are www.yoursite.com/Anypage?type=PersonA and www.yoursite.com/Anypage?type=PersonB respectively. So Basically, you would be trying to pass this identifier as parameters to your url. You can fetch the parameters of the url, identify what person is visiting and accordingly show/hide respective div. Consider below example.
JS
The below function from this answer originally, fetches URL Parameter values.
function getURLparam( name) {
url = location.href;
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( url );
return results == null ? null : results[1];
}
Use the above function to fetch URL values.
$(document).ready(function(){
var type=getURLParam('type'); //Passing the parameter key
//type variable will have either PersonA or PersonB
if(type=="PersonA"){
$(".type1").show();
}
else{
if(type=="PersonB"){
$(".type1").show();
}
}
$("#b1").click(function(){
$(".type1").show();
$(".type2").hide();
});
$("#b2").click(function(){
$(".type1").hide();
$(".type2").show();
});
/*$(".type1").hide();
$(".type2").hide();*/
//instead of this you can add css `display:none` for both the `class`
})
CSS
.type1,.type2{
display:none;
}
If I could tell you, the best solution would be:
Send someone a url of type: http://www.example.com?view=1 or http://www.example.com?view=2
Then collect the data by using this in your webpage (in case of PHP):
if($_GET["view"]) {
echo "<script>var v=". $_GET['view']. "</script>";
}
Then in javascript use:
$(document).ready(function(){
if(v==1){
$(".type2").hide();
$(".type1").show();
}
else if(v==2){
$(".type1").hide();
$(".type2").show();
}
});
$("#b1").click(function(){
$(".type1").show();
$(".type2").hide();
});
$("#b2").click(function(){
$(".type1").hide();
$(".type2").show();
});
Here is another suggestion:
Make links like: http://example.com/#type1 and http://example.com/#type2
Make it more flexible, so you can add more types later without changing JS code:
To each element with type1, type2, add another class type
To each element with ID b1, b2, add a data attribute like ex. data-toggle="type2"
(You can then remove the id if you don't need it elsewhere)
Then Javascript:
function toggleType(type) {
$('.type').hide().filter('.'+type).show();
}
var initialType = location.hash && location.hash.substring(1) || 'type1';
toggleType(initialType);
$('[data-toggle]').click(function () {
toggleType($(this).data('toggle'));
});
What would be a viable way to accomplish the following:
A website has two pages; Parent page and Inside page. If user came to the Inside page directly by typing in the address or by following a link from a page other than Parent page, then show "foo". If user came to the Inside page from the parent page, then show "bar".
I would need this done in JS if possible. If not, PHP is a secondary choice.
You can get the page the user came from with document.referrer.
So you could implement your solution like this:
if (document.referrer === 'yoursite.com/parentpage') {
// do bar
} else {
// do foo
}
Please try this
This code in second page
jQuery(window).load(function() {
if (sessionStorage.getItem('dontLoad') == null) {
//show bar
}
else{
//show foo
}
});
This code in parent page
jQuery(window).load(function() {
sessionStorage.setItem('dontLoad','true')
});
with php:
There is a simple way is to create a mediator page which redirect to inner page after make a session / cookie.. then if you'll get session / cookie, you show foo & unset session.
if someone directly come from url, no session / cookie found & it show bar..
You can use the document.referrer but this is not always set. You could add a parameter to the URL on the parent page and then check for its existance in the child page
Link on the parent page:
<a href='myChildPage.html?fromParent=1'>My Child Page</a>
JS code on your child page:
var fromParent=false;
var Qs = location.search.substring(1);
var pairs = Qs.split("&");
for(var i = 0; i < pairs.length; i++){
var pos = pairs[i].indexOf('=');
if(pos!==-1){
var paramName = pairs[i].substring(0,pos);
if(paramName==='fromParent'){
fromParent=true;
break;
}
}
}
if(fromParent){
alert("From Parent");
}else{
alert("NOT From Parent");
}
This method isnt 100% foolproof either as users could type in the same URL as your parent page link. For better accuracy check the document.referrer first and if not set use the method i've outlined above
intelligent rendering with jQuery
After using #Rino Raj answer, i noticed it needed improvement.
In javascript, the load() or onload() event is most times much slower,
since it waits for all content and images to load before executing your attached functions.
While an event attached to jQuery’s ready() event is executed as soon as the DOM is fully loaded, or all markup content, JavaScript and CSS, but not images.
Let me explain this basing, on code.
When i used #Rino Raj's code, with load() event, it works but on the second/called page, the content appears before class="hide fade" is added (which I don't really want).
Then i refactored the code, using the ready() event, and yes,
the content that i intended to hide/fade doesn't appear at all.
Follow the code, below, to grasp the concept.
<!-- Parent/caller page -->
<script type="text/javascript">
$(document).ready(function() {
sessionStorage.setItem('dontLoad', 'true');
});
</script>
<!-- Second/called page -->
<script type="text/javascript">
$(document).ready(function() {
if(sessionStorage.getItem('dontLoad') == null) {
$("#more--content").removeClass("hide fade");
} else {
$("#more--content").addClass("hide fade");
}
});
</script>
I am currently making a website for an architecture firm, HLArchitects. In the projects page I have created an HTML / Javascript image gallery. slightly above the main big image to the right an option can be found to choose between images / information. I use Jquery to show and hide the information or the images, however i don't feel this is such a great way to do so. It can be viewed here for reference: http://www.hla.co.za/projects/Hyuandai_Training_Centre/
Here is the relevant Javascript:
$(".selector a").click(function(){
if ($(this).attr("data-show") == "images") {
$("#info").fadeOut("fast");
$("#displayImg").fadeIn("fast");
$("#imageFlow").fadeIn("fast");
} else if ($(this).attr("data-show") == "info") {
$("#displayImg").fadeOut("fast");
$("#imageFlow").fadeOut("fast");
$("#info").fadeIn("fast");
}
})
Relevant HTML:
<p class="selector">images | information</p>
My problem is that the url does not change to reflect the content, but I do not want to make a separate page. I could imagine i would need to make use of link anchor's but am not to sure how to do so.
Thank you in advance
You can change the hash of an url by using:
window.location.hash = 'images';
EDIT:
Firstly, in this context you don't need to include the hash symbol!
Secondly, I missed the obvious, you only need to change the HTML to this to update the URL correctly:
<p class="selector">
images
information
</p>
Then you can use the following in your jQuery, note I've included the attribute check inside the selector itself:
$(".selector a[href=#images]").click(function() {
$("#info").fadeOut("fast");
$("#displayImg").fadeIn("fast");
$("#imageFlow").fadeIn("fast");
});
$(".selector a[href=#info]").click(function() {
$("#displayImg").fadeOut("fast");
$("#imageFlow").fadeOut("fast");
$("#info").fadeIn("fast");
});
If you want to refresh the page and get the same content, you can check the hash tag by doing the following (you may need to edit this depending what elements are showing initially):
$(document).ready(function() {
if (window.location.hash == '#images') {
$("#info").hide();
$("#displayImg").show()
$("#imageFlow").show();
}
else if (window.location.hash == '#info') {
$("#displayImg").hide();
$("#imageFlow").hide();
$("#info").show();
}
});
If all you're doing is setting text in the URL, you can do this easily by setting location.hash
location.hash="#SomeTextHereThatMayOrMayNotNecessarilyBeAnAnchor"
^ Note that "#" is important
I'm attempting to hide a div based on the url hash tag. I'm using a jquery plugin called zozo tabs that allows for deep-linking and it shows and hides divs.
There is a particular div on the page (not in the tab area) I would like to hide given the url/s. I've searched but cannot figure it out. Please excuse my javascript noobness!!! I've tried this. No such luck. It doesnt seem to work. Any help would greatly appreciated.
I've tried php but it doesnt work on the hash
To start the plugin creates this type of url
http://localhost:8888/site/funds/#tabbed-nav=fund-strategy
The html is:
<ul>
<li data-link="fund-strategy"><a>Fund Strategy</a></li>
<li data-link="portfolio-characteristics"><a>Portfolio Characteristics</a></li>
<li data-link="performance"><a>Performance</a></li>
</ul>
<div class="strategy">This copy shows when the li is clicked on</div>
This is me attempting to hide a div given the url with js
var jQ = jQuery.noConflict();
jQ(document).ready(function() {
var url = document.location.href;
if (url.indexOf('http://localhost:8888/site/funds/#tabbed-nav=fund-strategy') >= 0) {
jQ('.fourth').hide();
};
});
<div class="fourth">Hide me please!</div>
Just try to use something like this:
var currentHash = window.location.hash;
if (currentHash=="#tabbed-nav=fund-strategy") {
$('.fourth').hide();
}
Be sure that there is a html element with class 'fourth' in your html code. Otherwise this will not hide anything.
I think i pinpointed the problem. The zozo tabs utilizes hashchange. So after hitting my head against the wall and HUGE inspiration from users here. I downloaded the ba.hashchange and wrapped the given answers in a hashchange function here is the code if anyone is interested. This seemed to work.
var jz = jQuery.noConflict();
jz(function(){
jz(window).hashchange( function(){
// Alerts every time the hash changes!
var hash = document.location.hash;
if (hash == '#tabbed-nav=risk' || hash == '#tabbed-nav=fund-strategy') {
jz('.fourths').show();
} else {
jz('.fourths').hide();
}
})
jz(window).hashchange();
});