I have the following code for making the button not visible and it works for a second and then button comes again. The links on navigates on the same page
I have tried "return false;" but then my navigation doesn't work.
What to do for keeping the button hidden?
JavaScript
function btn_hide(){
document.getElementById("btn_shfaqe").style.display="none";
}
html
test1
You have to do two things; Return the function and return false, like this:
javascript
function btn_hide(){
document.getElementById("btn_shfaqe").style.display="none";
return false;
}
html
test1
Here's a DEMO
EDIT according to comment
You are better off hiding the button serverside, but if you really want to use javascript you can do this on page load:
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, " "));
}
window.onload = function() {
var vid_id = getParameterByName('vid_id');
if (vid_id == 0 || vid_id == 5) {
document.getElementById("btn_shfaqe").style.display="none";
}
}
It is an anchor tag . I will navigate you to another page .
If you don't want to navigate to another page you may use
javascript:void(0)
as
<a href="javascript:void(0)" onclick="btn_hide();">
Try this fot javascript :
<script>
function visibilite() {
var targetElement = document.getElementById(\'div_connexion\');
targetElement.style.display = "none";
}
</script>
and this in the html :
<div id="div_connexion"><a class="connexion" href="javascript:visibilite();">Connexion</a></div>
I have this on my website and when I click on the div it desapear until the user refresh the page.
The links on navigates on the same page I have tried "return false;" but then my navigation doesn't work.
You want to hide the link and still be able to navigate?
There are two ways of solving the problem:
Server-side: add a parameter to your url, like so: ?tip=fin&vid_id=0&hideButton=1 and on server side apply the display: none; style to your element if it is set. If you're using PHP, something along the lines of the following should do the trick:
<?php if (isset($_GET['hideButton'])) { echo 'style="display: none;"'; }
Client-side: write some flag value to localStorage when button is clicked. When the page is loaded, check if the flag is set. If it is set - hide the anchor.
// Onclick handler:
myButton.addEventListener('click', function () {
localStorage.setItem('hideButton', 'yes');
}, false);
// Onload handler:
window.addEventListener('load', function () {
if (localStorage.getItem('hideButton') === 'yes') {
myButton.style.display = 'none';
}
});
Using one of these ways will hide the link while keeping navigation working. You don't even need to hide the button in the onclick event handler.
Please try with thw below code snippet.
<head runat="server">
<title></title>
<script type="text/javascript">
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, " "));
}
function btn_hide() {
document.getElementById("btn_shfaqe").style.display = "none";
}
</script>
</head>
<body>
<div>
<button id="btn_shfaqe" style="display: none">
jayesh</button>
test1
<script type="text/javascript">
if (getParameterByName("tip") == "") {
document.getElementById("btn_shfaqe").style.display = "";
}
</script>
</div>
</body>
</html>
Related
I need to send a parameter value into a query string of a PostBackUrl method
within asp button.
The value I need is already being captured within a java script function shown below.
How do I send the value in hiddId as part of URL ? The below method isn't working. Can someone please help ?
<script language="javascript" type = "text/javascript">
function btn_Selected() {
var hiddId = null;
$('#<%=GridView1.ClientID %>').find('input[type=radio]:checked').each(function () {
hiddId = $(this).closest('tr').find('input[type = "hidden"]').val();
});
}
<asp:Button ID="Btn_Update" runat="server" Text="Update" PostBackUrl="Screen_Edit.aspx?CustID='<%=hiddId%>'"
Instead of a post-back, just redirect using JavaScript.
function btn_Selected() {
var hiddId = null;
$('#<%=GridView1.ClientID %>').find('input[type=radio]:checked').each(function () {
hiddId = $(this).closest('tr').find('input[type = "hidden"]').val();
});
window.location.href = "Screen_Edit.aspx?CustID='" + hiddId + "'"
}
If you look at the HTML source of the page, the button will have an javascript onclick event that looks something like this javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$mainContentPane$Btn_Update", "", false, "", "Screen_Edit.aspx?CustID=", false, false))
All we have to do is find a way to insert your variable after ?CustID=.
You can replace the onclick value of the button with the .attr() function of jQuery and do a search and replace to insert your variable.
<script type="text/javascript">
$(document).ready(function () {
var hiddId = $(this).closest('tr').find('input[type = "hidden"]').val();
$("#<%=Btn_Update.ClientID %>").attr("onclick", $("#<%=Btn_Update.ClientID %>").attr("onclick").replace("?CustID=", "?CustID=" + hiddId));
});
</script>
What I'm trying to achieve is showing different messages based on something like "?HELLO" being appended onto the URL of a page. For the purpose of this question, the page content could be something as simple as this:
<!doctype html>
<html>
<head>
<title>Dynamic Content</title>
<style>
#container {width:100%height:100px;background:#000;}
#container div {text-align:center;color:pink;}
</style>
</head>
<body>
<div id="container">
<div id="hello">How are you</div>
<div id="goodbye">See you later</div>
<div id="whoAreYou">Get Out</div>
</div>
</body>
</html>
Also I would be interested in knowing how to do this using a single div and getting element by ID. I'm not sure which would work better for me in the end. I might want to add other elements based on the parameters like links or images. A client of mine has an eCommerce site and is considering implementing something like this for customers who land on the site with promocodes which will look like "?SourceCode=HELLO" but I'm assuming a string is a string.
Here is a fiddle although i don't think it will help for testing the URL jsfiddle.net/stormbloom/caqfxx46
Updated
I'm updating the answer to include implementation. It seems that you really want to just change the messaging based on the value of the query string. It's best to then store your messages in a scalable fashion and then just change a single div out.
Step 1 - Get the query parameter value
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
var parameter = getParameterByName('SourceCode');
Step 2 - Store Your Messages
var messages = {
hello: "Hi",
goodbye: "Goodbye",
default: "Who are You?"
}
Step 3 - Change Message Based on Value of Query
var changeMessage = function(queryValue) {
var container = $('#container');
container.html(messages[queryValue]);
}
Here's a fiddle: https://jsfiddle.net/wf2x6yua/2/
Here's an example based on #Phillip Chan 's answer and your jsfiddle.
$(document).ready(function() {
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
function setContainerByParam(parameter) {
// hide all divs inside "container"
$("#container > div").hide();
// show divs, based on the given parameter
if (parameter === "hello") {
$("#hello").show();
} else if (parameter === "goodbye") {
$("#goodbye").show();
} else if (parameter === "whoAreYou") {
$("#goodbye").show();
} else {
$("#unknown").show();
}
}
// try to get param "SourceCode" and set divs
var url_param = getParameterByName('SourceCode');
setContainerByParam(url_param);
// try to set divs by simulating different parameters
setTimeout(function(){ setContainerByParam('hello'); }, 2000);
setTimeout(function(){ setContainerByParam('goodbye'); }, 4000);
setTimeout(function(){ setContainerByParam('whoAreYou'); }, 6000);
});
#container {width:100%height:100px;background:#000;}
#container div {text-align:center;color:pink;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="container">
<div id="hello">How are you</div>
<div id="goodbye">See you later</div>
<div id="whoAreYou">Get Out</div>
<div id="unknown">unknown parameter</div>
</div>
I have some problem with redirecting urls after checkboxes are selected. I am using document.location for this, but this doesn´t work in my code. I'm trying to fix it, but without success.
This is the part of my code which doesn't work:
function objednat() {
var adress = "";
if (document.getelementbyid('BoxtarifVolani1').checked == true) {
adress += "#tarifVolani1";
}
window.location = 'http://www.investcon.webinpage.cz/cz/objednat-tarif-dobijeci-cislo/' + adresa;
}
I want to redirect this to a form, which will be filled with the selected values. I don't know why, but this document.location doesn't work in the code.
This is the part of the code I use in the formula for grabbing the hash from the url.
<script type="text/javascript">
if(window.location.hash) {
//set the value as a variable, and remove the #
var hash_value = window.location.hash.replace('#', '');
if (tarifVolani1 == true) {
document.getelementbyid('BoxtarifVolani1").checked = true;}
....
</script>
What am I doing wrong?
Whatever you have done is right, except, the function name is wrong case:
Change getelementbyid to getElementById.
Change adresa to adress.
Code:
function objednat() {
var adress = "";
if (document.getElementById('BoxtarifVolani1').checked == true) {
adress += "#tarifVolani1";
}
window.location = 'http://www.investcon.webinpage.cz/cz/objednat-tarif-dobijeci-cislo/' + adress;
}
jQuery way of doing it
function objednat() {
var adress = "";
if ($('#BoxtarifVolani1').is(':checked')) {
adress += "#tarifVolani1";
}
window.location = 'http://www.investcon.webinpage.cz/cz/objednat-tarif-dobijeci-cislo/'+adress;
}
For your ref: jQuery :checked Selector
I have a bit of coding that displays div's when requested through a link, now I want to be able to link to that page, and execute the JavaScript with the parameter given through the url in PHP.
The JavaScript displays and closes div's when requested through links.
Link example:
Click here for div1
Click here for div2
Click here for div3
JavaScript code:
$('.selectType').on('click', function(e){
e.preventDefault();
var targetDiv = $($(this).attr('href'));
if(!targetDiv.is(':visible')){
$('.hide').slideUp();
targetDiv.slideDown();
}else{
$('.hide').slideUp();
}
});
css for div:
.hide{display:none;}
div code:
<div id="div1" class="hide">Text in div1</div>
<div id="div2" class="hide">Text in div2</div>
<div id="div3" class="hide">Text in div3</div>
I want to give the URL a link like so:
http://www.example.com/pages/index.php?pageid=div2
When that page is visited, the JavaScript will execute as if the link "Click here for div2" was pressed, so that div2 pops up.
I have no idea where to get started, as in, I do know how to grab the $_GET['pageid'] variable, but no clue how to combine it with the JavaScript into displaying the requested div.
Thanks ahead!
First change your hide/show into a function to save repeating code... ie:
var toggleSelectType = function(target) {
var targetDiv = $(target);
if (!targetDiv.is(':visible')) {
$('.hide').slideUp();
targetDiv.slideDown();
} else {
$('.hide').slideUp();
}
};
$('.selectType').on('click', function(e){
e.preventDefault();
toggleSelectType($(this).attr('href'));
});
Add a function that helps you grab query string values such as:
(How can I get query string values in JavaScript?) ** credit
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, " "));
}
Then when the page loads check for the value of pageid and run your function:
var pageId = getParameterByName('pageid');
toggleSelectType('#'+pageId);
<script language="JavaScript">
function goThere()
{
var the_url = window.document.form.button.value;
var good_url = fixURL(the_url);
var new_window = window.open(good_url,"new_window","menubar,resizeable");
}
function fixURL(the_url)
{
var the_first_seven = the_url.substring(0,7);
the_first_seven = the_first_seven.toLowerCase();
if (the_first_seven != 'http://')
{
the_url = "http://" + the_url;
}
return the_url;
}
</script>
</head>
<body>
<form name="the_form" onclick="goThere()"; return false;">
<input type="button" name="the_url" class="broadGroups" onClick="goThere()" value="http://en.wikipedia.org/wiki/Category:Sports"></input>
<input type="button" name="the_url" class="broadGroups" onclick="goThere()" value="http://en.wikipedia.org/wiki/Category:Film"></input>
</form>
</body>
</html>
So this code may be totally messed up, but here is what I am trying to do.
There are two buttons inside the tag. I want each to use the method onsubmit to trigger the function goThere(). How do I set it up so that the_url is set to a value that I pull from the button tag. I also want to be able to put non-url text on the button itself while allowing it to call goThere () through the method call onsubmit.
In the end it should just take the url, make sure it starts with http:// (in this case it doesnt matter because the user isn't inputting the url, but I'd like to keep it in for other purposes later on) and open it in a new window with a menubar and the resizable property.
Sorry for the long post. Any help would be greatly appreciated.
Pass in this in your goThere call. This will bring in the clicked element to your goThere function. Then you access the attributes for the clicked button.
http://jsfiddle.net/wJMgb/
onClick="goThere(this)"
function goThere(elem) {
var the_url = elem.value;
var good_url = fixURL(the_url);
var new_window = window.open(good_url, "new_window", "menubar,resizeable");
}
function fixURL(the_url) {
var the_first_seven = the_url.substring(0, 7);
the_first_seven = the_first_seven.toLowerCase();
if (the_first_seven != 'http://') {
the_url = "http://" + the_url;
}
return the_url;
}