Displaying Div's based on URL using Javascript

Displaying Div's based on URL using Javascript - javascript

I’m new to Javascript and I’m having trouble displaying and hiding some divs based on url’s.
I have 4 divs that need to be shown depending on the url.
The 4 divs are:
Div 1
<body onload="callOnPageLoad1()”>
<div id="homeName" style="display:block"><h5>HOME</h5></div>
and needs to be displayed only when at:
http://www.fitzofdesign.com/
Div 2
<body onload="callOnPageLoad2()”>
<div id="profilesName" style="display:block"><h5>PROFILES</h5></div>
and needs to be displayed only when at:
http://www.fitzofdesign.com/?category=Profiles
Div 3
<body onload="callOnPageLoad3()”>
<div id="retailName" style="display:block"><h5>RETAIL</h5></div>
and needs to be displayed only when at:
http://www.fitzofdesign.com/?category=Retail
Div 4
<body onload="callOnPageLoad4()”>
<div id="blogName" style="display:block"><h5>BLOG</h5></div>
and needs to be displayed only when at:
http://www.fitzofdesign.com/?category=Blog
The JS I’m using is:
<script type="text/javascript">
function callOnPageLoad1()
{
var url = window.location.href;
if(url == "http://www.fitzofdesign.com/")
{
document.getElementById('homeName').style.display = 'block';
document.getElementById('profilesNamed').style.display = 'none';
document.getElementById('retailName').style.display = 'none';
document.getElementById('blogName').style.display = 'none';
}
else {
document.getElementById('homeName').style.display = 'none';
}
}
</script>
<script type="text/javascript">
function callOnPageLoad2()
{
var url = window.location.href;
if(url == "http://www.fitzofdesign.com/?category=Profiles")
{
document.getElementById('homeName').style.display = 'none';
document.getElementById('profilesNamed').style.display = 'block';
document.getElementById('retailName').style.display = 'none';
document.getElementById('blogName').style.display = 'none';
}
else {
document.getElementById('profilesNamed').style.display = 'none';
}
}
</script>
<script type="text/javascript">
function callOnPageLoad3()
{
var url = window.location.href;
if(url == "http://www.fitzofdesign.com/?category=Retail")
{
document.getElementById('homeName').style.display = 'none';
document.getElementById('profilesNamed').style.display = 'none';
document.getElementById('retailName').style.display = 'block';
document.getElementById('blogName').style.display = 'none';
}
else {
document.getElementById('retailName').style.display = 'none';
}
}
</script>
<script type="text/javascript">
function callOnPageLoad4()
{
var url = window.location.href;
if(url == "http://www.fitzofdesign.com/?category=Blog")
{
document.getElementById('homeName').style.display = 'none';
document.getElementById('profilesNamed').style.display = 'none';
document.getElementById('retailName').style.display = 'none';
document.getElementById('blogName').style.display = 'block';
}
else {
document.getElementById('blogName').style.display = 'none';
}
}
</script>
At present the only time this is working correctly is when I’m at:
http://www.fitzofdesign.com/
because Div 1 appears and the other 3 Divs are hidden.
This is not working when I’m at:
http://www.fitzofdesign.com/?category=Profiles
http://www.fitzofdesign.com/?category=Retail
http://www.fitzofdesign.com/?category=Blog
because Div 2, 3 & 4 are all incorrectly displaying for each URL.
I hope this makes sense.
Can anyone help please?
Thanks Rowan

You need to combine all those functions into something like:
var url = window.location.href;
if(url == "http://www.fitzofdesign.com/")
{
document.getElementById('homeName').style.display = 'block';
document.getElementById('profilesNamed').style.display = 'none';
document.getElementById('retailName').style.display = 'none';
document.getElementById('blogName').style.display = 'none';
}
else if(url == "http://www.fitzofdesign.com/?category=Profiles")
{
document.getElementById('homeName').style.display = 'none';
document.getElementById('profilesNamed').style.display = 'block';
document.getElementById('retailName').style.display = 'none';
document.getElementById('blogName').style.display = 'none';
}
And you need to make sure this check is called after everything loads, so put inside something like a jquery document.ready:
$(document).ready(function() {
var url = window.location.href
// rest of the code
}
Also, you might want to change the checks from:
url == "http://www.fitzofdesign.com/?category=Profiles"
to
url.indexOf("category=Profiles") > -1
Hope that helps

Firstly hide all the divs.
On window.onLoad event, fetch the querystring value and use that to display the appropriate div.
Below is the code snippet to extract the querystring category value.
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

Ok first, you don't need to put each of those in their own script tags. Keep them together.
Second, save stuff you repeat in JS as variables for performance and cleaner code:
var url = window.location.href,
fitz = "http://www.fitzofdesign.com/"
home = document.getElementById('homeName'),
profile = document.getElementById('profilesNamed'),
retail = document.getElementById('retailName').style.display,
blog = document.getElementById('blogName').style.display;
Third, you can check variables against each other:
if( url == fitz ) {
home.style.display = 'block';
profile.style.display = 'none';
retail.style.display = 'none';
blog.style.display = 'none';
}
else if ( url == fitz + "?category=Profiles" ) {
home.style.display = 'none';
profile.style.display = 'block';
retail.style.display = 'none';
blog.style.display = 'none';
}
else if ( url == fitz + "?category=Profiles" ) {
// etc.
}
Finally, you need to create an event listener that will determine when a click or some other user behavior occurs. That should trigger this function each time.
Look up addEventListener

Related

How to show and hide a div using javascript without calling any function?

I want to show and hide a div based on a condition. Please help me do this.
This my code:
<script>
var shad = '{SUBJECT}';
if (shad != "") {
document.getElementById("subjectr").style.display = 'none';
} else {
document.getElementById("subjectr").style.display = 'show';
}
</script>
<div id="subjectr">
sub
<input type="text" name="subjectr">
</div>

Try the following:
var shad ='SUBJECT';
if (shad !="") {
document.getElementById("subjectr").style.display = 'none';
}
else {
document.getElementById("subjectr").style.display = 'block';
}
sub: <input type="text" name="subjectr" id="subjectr" value='SUBJECT'/>

var shad ='SUBJECT';
if (shad != "") {
document.getElementById("subjectr").style.display = 'none';
} else {
document.getElementById("subjectr").style.display = 'block';
}

how can I fix my form validation

I have a problem with my code and I would appreciate if you help me. The problem is - when you fill in all inputs in the form correctly, the script removes attribute "disabled" from the submit button but for example if you clear all fields after filling in the forms, submit button will be able to submit the form, but it have to back attribute "disable". how can I fix it?
//validation name
document.callbackform.name.onkeyup = function() {
var name = document.callbackform.name.value;
if (name === "") {
document.callbackform.name.removeAttribute("class", "ready");
document.getElementById("callError").style.display = "block";
document.getElementById("calllErrorTwo").style.display = "none";
} else {
document.getElementById("callError").style.display = "none";
var pattern = new RegExp("^[а-я]+$", "i");
var isValid = this.value.search(pattern) >= 0;
if (!(isValid)) {
document.getElementById("calllErrorTwo").style.display = "block";
document.callbackform.name.removeAttribute("class", "ready");
} else {
document.getElementById("calllErrorTwo").style.display = "none";
document.callbackform.name.setAttribute("class", "ready");
}
}
};
//validation phone
document.callbackform.phone.onkeyup = function() {
var name = document.callbackform.phone.value;
if (name === "") {
document.callbackform.phone.removeAttribute("class", "ready");
document.getElementById("calltelError").style.display = "block";
document.getElementById("calltelErrorTwo").style.display = "none";
} else {
document.getElementById("calltelError").style.display = "none";
var pattern = new RegExp("[- +()0-9]+");
var isValid = this.value.search(pattern) >= 0;
if (!(isValid)) {
document.getElementById("calltelErrorTwo").style.display = "block";
} else {
document.getElementById("calltelErrorTwo").style.display = "none";
document.callbackform.phone.setAttribute("class", "ready");
}
}
};
//filling the form
document.callbackform.onkeyup = function() {
var a = document.callbackform.name.getAttribute("class");
var c = document.callbackform.phone.getAttribute("class");
if (a === "ready" && c === "ready") {
document.getElementById("subCallback").removeAttribute("disabled");
document.getElementById("subCallback").style.cursor = "pointer";
} else {
document.getElementById("subCallback").setAttribute("disabled");
document.getElementById("subCallback").style.cursor = "not-allowed";
}
};

Simple fix. .setAttribute("disabled"); doesn't work as disabled is a property, not an attribute, as it does not have a value. You simply need to use .disabled = true; as shown:
document.getElementById("subCallback").disabled = true;
It will also be good to use the following to remove the disabled property:
document.getElementById("subCallback").disabled = false;
.
Remember, setAttribute() always requires two arguments, the second argument being the attribute value.

function undefined error on show hide a div

i am trying to show and hide a div on click of a checkbox but it shows an error of checktwelve or checkten is undefined.please help me out here
function hided2(checkten) {
if (checkten.checked == true) {
document.getElementById("d2").style.display = 'block';
document.getElementById("d1").style.display = 'none';
checktwelve.checked = false;
}
else {
document.getElementById("d2").style.display = 'none';
document.getElementById("d1").style.display = 'block';
checktwelve.checked = true;
}
}
function hided1(checktwelve) {
if (checktwelve.checked == true) {
document.getElementById("d1").style.display = 'block';
document.getElementById("d2").style.display = 'none';
checkten.checked = false;
}
else {
document.getElementById("d1").style.display = 'none';
document.getElementById("d2").style.display = 'block';
checkten.checked = true;
}
}
and i made Onclick="hided1(checktwelve)" on checktwelve and likewise on other
checkten and checktwelve are id of checkboxes

checktwelve or checkten is undefined
You haven't defined these variables.
Onclick="hided1(checktwelve)"
tries to find checktwelve in global scope and can't find it.

Show specific div based on url

I need to show a particular div when a button is clicked, only if the url is on a certain members profile. If its not on a profile page show another div that will display an error message. I have written it out extra long because I'm not that great at javascript. I'm having 2 problems with the code below:
1) only the first url will show the correct div not the url after the or (||)?
2) the else code that should show the error message shows up no matter what page you're on?
Please help.
function showdiv() {
if ((window.location.href == "http://google.com/profile/AA") || (window.location.href == "http://google.com/profile/AA/?xg_source=profiles_memberList")) {
document.getElementById('AA').style.display = 'block';
if (document.getElementById('AA').style.display == 'none') document.getElementById('AA').style.display = 'block';
else document.getElementById('AA').style.display = 'block';
}
if ((window.location.href == "http://google.com/profile/BB") || (window.location.href == "http://google.com/profile/BB/?xg_source=profiles_memberList")) {
document.getElementById('BB').style.display = 'block';
if (document.getElementById('BB').style.display == 'none') document.getElementById('BB').style.display = 'block';
else document.getElementById('BB').style.display = 'block';
}
if ((window.location.href == "http://google.com/profile/CC") || (window.location.href == "http://google.com/profile/CC/?xg_source=profiles_memberList")) {
document.getElementById('CC').style.display = 'block';
if (document.getElementById('CC').style.display == 'none') document.getElementById('CC').style.display = 'block';
else document.getElementById('CC').style.display = 'block';
}
if ((window.location.href == "http://google.com/profile/DD") || (window.location.href == "http://google.com/profile/DD/?xg_source=profiles_memberList")) {
document.getElementById('DD').style.display = 'block';
if (document.getElementById('DD').style.display == 'none') document.getElementById('DD').style.display = 'block';
else document.getElementById('DD').style.display = 'block';
}
if ((window.location.href == "http://google.com/profile/EE") || (window.location.href == "http://google.com/profile/EE/?xg_source=profiles_memberList")) {
document.getElementById('EE').style.display = 'block';
if (document.getElementById('EE').style.display == 'none') document.getElementById('EE').style.display = 'block';
else document.getElementById('EE').style.display = 'block';
}
if ((window.location.href == "http://google.com/profile/FF") || (window.location.href == "http://google.com/profile/FF/?xg_source=profiles_memberList")) {
document.getElementById('FF').style.display = 'block';
if (document.getElementById('FF').style.display == 'none') document.getElementById('FF').style.display = 'block';
else document.getElementById('FF').style.display = 'block';
}
else {
document.getElementById('error').style.display = 'block';
if (document.getElementById('error').style.display == 'none') document.getElementById('error').style.display = 'block';
else document.getElementById('error').style.display = 'block';
}
}

That code will be a nightmare to maintain. You might have better luck structuring it more like this:
function getId() {
var href = window.location.href;
if (href.indexOf('?') != -1) {
//remove any url parameters
href = href.substring(0, href.indexOf('?'));
}
if (href.charAt(href.length - 1) == '/') {
//check for a trailing '/', and remove it if necessary
href = href.substring(0, href.length - 1);
}
var parts = href.split("/");
return parts[parts.length - 1]; //last array element should contain the id
}
function showdiv(){
var id = getId();
var elem = document.getElementById(id);
if (elem) {
if (elem.style.display == 'none') {
elem.style.display = 'block';
}
else {
elem.style.display = 'none';
}
}
else {
if (document.getElementById('error').style.display == 'none') {
document.getElementById('error').style.display='block';
}
else {
document.getElementById('error').style.display='none';
}
}
}

You should work out the logic first.
This code makes no sense at all.
document.getElementById('AA').style.display = 'block';
if (document.getElementById('AA').style.display == 'none') {
document.getElementById('AA').style.display = 'block';
}
else {
document.getElementById('AA').style.display = 'block';
}
Structurally, it is similar to this code (simplified and with comments)
var a = 'block';
// this if will never be true, because we just set a to "block"
if (a == 'none') {
a = 'block';
}
// this else will always execute and set a to "block" again.
// something that was already done in the first line.
else {
a = 'block';
}
Also try to factor our the repeating parts of your code as #aroth has nicely demonstrated.

minimize 'n' number of javascript functions into one function in jquery

I have 'n' number of javascript functions in javascript which nearly gets an element and sets its display property.
function ShowDivforassignclick() {
document.getElementById("FollowupDiv").style.display = 'block';
document.getElementById("datatable").style.display = 'block';
}
function HideDivforassignclick() {
document.getElementById("adddiv").style.display = 'none';
document.getElementById("ImageButtonDiv").style.display = 'none';
document.getElementById("datatable2").style.display = 'block';
document.getElementById("ImageButtonDiv2").style.display = 'block';
document.getElementById("close1").style.display = 'block';
return false;
}
function HideDivforassignclick1() {
document.getElementById("adddiv").style.display = 'none';
document.getElementById("ImageButtonDiv").style.display = 'none';
document.getElementById("datatable2").style.display = 'block';
document.getElementById("ImageButtonDiv2").style.display = 'block';
document.getElementById("close1").style.display = 'block';
return false;
}
function HideDiv() {
document.getElementById("adddiv").style.display = 'none';
}
function HideImageButtonDivcontactinfollowup() {
document.getElementById("adddiv").style.display = 'none';
document.getElementById("ImageButtonDiv").style.display = 'none';
document.getElementById("datatable4").style.display = 'block';
document.getElementById("ImageButtonDiv1").style.display = 'block';
return false;
}
function HideImageButtonDivcontact() {
document.getElementById("adddiv").style.display = 'none';
document.getElementById("ImageButtonDiv").style.display = 'none';
document.getElementById("datatable1").style.display = 'block';
document.getElementById("ImageButtonDiv1").style.display = 'block';
document.getElementById("close").style.display = 'block';
return false;
}
function HideImageButtonDivclose() {
document.getElementById("adddiv").style.display = 'block';
document.getElementById("ImageButtonDiv").style.display = 'none';
document.getElementById("datatable1").style.display = 'none';
document.getElementById("ImageButtonDiv1").style.display = 'none';
document.getElementById("ImageButtonDiv2").style.display = 'none';
document.getElementById("close").style.display = 'none';
return false;
}
function HideImageButtonDivclose1() {
document.getElementById("adddiv").style.display = 'none';
document.getElementById("ImageButtonDiv").style.display = 'block';
document.getElementById("datatable2").style.display = 'none';
document.getElementById("datatable").style.display = 'block';
document.getElementById("ImageButtonDiv1").style.display = 'none';
document.getElementById("ImageButtonDiv2").style.display = 'none';
document.getElementById("close1").style.display = 'none';
}
function HideImageButtonDivclose1forfollowup() {
document.getElementById("adddiv").style.display = 'block';
document.getElementById("ImageButtonDiv").style.display = 'block';
document.getElementById("datatable2").style.display = 'none';
document.getElementById("datatable").style.display = 'block';
document.getElementById("ImageButtonDiv1").style.display = 'none';
document.getElementById("ImageButtonDiv2").style.display = 'none';
document.getElementById("close1").style.display = 'none';
}
function HideImageButtonDivuser() {
document.getElementById("adddiv").style.display = 'none';
document.getElementById("ImageButtonDiv").style.display = 'none';
document.getElementById("datatable2").style.display = 'block';
document.getElementById("ImageButtonDiv2").style.display = 'block';
document.getElementById("close").style.display = 'block';
document.getElementById("close1").style.display = 'none';
return false;
}
function HideImageButtonDivuser1() {
document.getElementById("adddiv").style.display = 'none';
document.getElementById("ImageButtonDiv").style.display = 'none';
document.getElementById("datatable2").style.display = 'block';
document.getElementById("ImageButtonDiv2").style.display = 'block';
document.getElementById("close").style.display = 'none';
document.getElementById("close1").style.display = 'block';
return false;
}
function HideImageButtonDivuserinfollowup() {
document.getElementById("FollowupDiv").style.display = 'none';
document.getElementById("adddiv").style.display = 'none';
document.getElementById("ImageButtonDiv").style.display = 'none';
document.getElementById("ImageButtonDiv2").style.display = 'block';
return false;
}
function HideImageButtonDivforAdd() {
document.getElementById("ImageButtonDiv").style.display = 'none';
document.getElementById("datatable").style.display = 'none';
document.getElementById("adddiv").style.display = 'block';
document.getElementById("ctl00_ContentPlaceHolder1_ImgNoRecords").style.display = 'none';
return false;
}
function HideImageButtonDivforEdit() {
document.getElementById('ImageButtonDiv').style.display = 'none';
document.getElementById("datatable").style.display = 'none';
document.getElementById("adddiv").style.display = 'block';
return true;
}
function ShowImageButtonDiv() {
document.getElementById("ImageButtonDiv").style.display = 'block';
document.getElementById("datatable").style.display = 'block';
document.getElementById("adddiv").style.display = 'none';
return true;
}
function ShowImageButtonDivs() {
document.getElementById("ImageButtonDiv").style.display = 'block';
document.getElementById("datatable").style.display = 'block';
document.getElementById("adddiv").style.display = 'none';
document.getElementById("close").style.display = 'none';
document.getElementById("close1").style.display = 'block';
return true;
}
function ShowImageButtonDivss() {
document.getElementById("ImageButtonDiv").style.display = 'block';
document.getElementById("datatable").style.display = 'block';
document.getElementById("adddiv").style.display = 'block';
document.getElementById("close1").style.display = 'block';
return true;
}
function ShowImageButtonDivforfollowup() {
document.getElementById("ImageButtonDiv").style.display = 'block';
document.getElementById("datatable").style.display = 'block';
document.getElementById("adddiv").style.display = 'block';
return true;
}
function ShowImageButtonDiv1() {
document.getElementById("ImageButtonDiv1").style.display = 'block';
document.getElementById("datatable1").style.display = 'block';
document.getElementById("adddiv").style.display = 'none';
document.getElementById("ImageButtonDiv").style.display = 'none';
return true;
}
function showDisplaydiv() {
document.getElementById("ConfirmationPanel").style.display = 'block';
document.getElementById("datatable").style.display = 'block';
document.getElementById("ImageButtonDiv").style.display = 'block';
document.getElementById("adddiv").style.display = 'none';
return false;
}
I think there must be a really simple way to make these functions into a single one using jquery. Any suggestion?

There are many ways you can go.
First, instead of document.getElementbyId('something'), in jQuery you can use $('#something'). Instead of using style.display = block and style.display = none, the jQuery way is:
$('#something').hide();
$('#something').show();
or even:
$('#something').toggle();
Next, rather than identify long lists of items by their individual IDs, hopefully your page is structured so you can select by class, or by an enclosing container. If you have ten elements to hide, and they're all inside a div container, don't select each one by ID for hiding. Select the container:
$('#container').find('.setOne').hide(); // assume class "setOne" on all
// elements in a particular group
$('#container_of_datatable2').hide(); // if hiding the container works for you
$('#container_of_datatable2')
.find('table, div') // to hide tables or divs within the specific container
.hide();
If the container approach doesn't work for you (your IDs seem to almost but not quite fit a fixed pattern), you can set up arrays containing selectors for the IDs that work together.
var setOne = ['#datatable4','#adddiv','#imagebuttondiv','#etc'];
var setTwo = ['#something','#something-else','#etc2'];
and then use those something like this:
$( setOne.join(",") ).hide();
It looks like you're trying to wrap your code in functions that have meaningful (to you) names. But those function names seem to be related more closely to the kinds of objects you'll be showing and hiding, than to the business rule. So perhaps instead of HideImageButtonDivclose1forfollowup(), you might have:
function beginFollowup(){
$( setOne.join(",") ).hide();
$( setFive.join(",") ).show();
...etc...
}
So when you actually sequence these functions and behaviors, your code will be clearer:
beginFollowup();
endFollowup();
if( something ) {
beginSomeOtherThing();
}
Just some ideas to get you started.

jQuery works with a selector and returns an array of elements. You simply need to pass a selector that selects all your elements and call hide(). Let's say all your elements had the "foo" CSS class e.g. <div class='foo'/>, you'd write $('.foo').hide(). Let's say you had two elements with IDs of "thing1" and "thing2". Your selector would be a little different, but you'd still call hide() on the returned array of elements: $('#thing1, #thing2').hide(). show() and hide() modify the display property behind the scenes, you can also modify it directly, for example: $('#thing').css('display', 'block'). Check the jQuery API for more details. Add jQuery to your page, and play around in Firebug console, selecting elements, and hiding and showing them.

How about this:
/**
* Shows or hides elements specified by array of element IDs,
* #param bShow true if you want to show the elements, hide otherwise
*/
function showHide(arrElemIds, bShow) {
$.each(arrElemIds, function(idx, elemId) {
if(!!bShow) {
$("#" + elemId).show();
}else {
$("#" + elemId).hide();
}
}
}
Then use as:
showHide(["adddiv", "ImageButtonDiv"]); //hide
showHide(["datatable2", "ImageButtonDiv2", "close1"], true); // show
// ...and so on
Edit:
On second thought, I'd rather you have separate functions to show and hide:
/**
* Shows specified by array of element IDs,
*/
function show(arrElemIds) {
$.each(arrElemIds, function(idx, elemId) {
$("#" + elemId).show();
}
}
/**
* Hides elements specified by array of element IDs,
*/
function hide(arrElemIds) {
$.each(arrElemIds, function(idx, elemId) {
$("#" + elemId).hide();
}
}
hide(["adddiv", "ImageButtonDiv"]); //hide
show(["datatable2", "ImageButtonDiv2", "close1"]); // show

Develop Reference

JavaScript is the programming language of the Web.

Displaying Div's based on URL using Javascript - javascript

Related

How to show and hide a div using javascript without calling any function?

how can I fix my form validation

function undefined error on show hide a div

Show specific div based on url

minimize 'n' number of javascript functions into one function in jquery

Categories

Resources