I am making php based web application .I'd like to have a box displayed on the same page when a link is being clicked using java script.How can i achieve this??
I have tried the below code
<script>
function a()
{
document.getElementsById("a").style.visibility="visible";
}
</script>
<a style="position:absolute;left:84%;top:32%;font-size:13px " href="" onclick="a()">
Forgot Password?
</a>
<div id="a" style="position:absolute;left:30%;top:10%;width:40%;height:40%;background-color:lightgray;visibility:hidden">
</div>
The method of document is wrong.
It should be getElementById, you could use Google chrome DEV tools (Ctrl + shift + i on windows, ⌘ + option + i on Mac) to debug your code.
You needed to fix getElementsById isn't plural, should be getElementById
To stop the page reloading on click, set href="javascript:a()"
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script>
function a()
{
document.getElementById("a").style.visibility="visible";
}
function close_a()
{
document.getElementById("a").style.visibility="hidden";
}
</script>
<a style="position:absolute;left:84%;top:32%;font-size:13px " href="javascript:a()">
Forgot Password?
</a>
<div id="a" style="position:absolute;left:30%;top:10%;width:40%;height:40%;background-color:lightgray;visibility:hidden">
<i class="fa fa-times-circle"></i> Close Me
</div>
added function to close and font awesome
Change your code to this and the box will be displayed:
<script>
function a()
{
document.getElementById("a").style.display="block";
return false;
}
</script>
<a style="position:absolute;left:84%;top:32%;font-size:13px " href="#" onclick="return a()">
Forgot Password?
</a>
<div id="a" style="position:absolute;left:30%;top:10%;width:40%;height:40%;background-color:lightgray;display: none">
</div>
There was an error in your code. getElementById is correct, and your <a> link refresh the page, correct method to avoid refresh is to change onclick="a();" to onclick="return a();" so that javascript look for return of function, and in function, we return false, therefore keep page same and avoid refresh.
Additionally you can add content to your box:
<script>
function a()
{
document.getElementById("a").style.display="block";
document.getElementById("a").innerHTML="<b>your other contents inside the box</b>";
return false;
}
</script>
<a style="position:absolute;left:84%;top:32%;font-size:13px " href="#" onclick="return a();">
Forgot Password?
</a>
<div id="a" style="position:absolute;left:30%;top:10%;width:40%;height:40%;background-color:lightgray;display: none">
</div>
Related
It use to work in the past and on other current websites but updating this site it no longer works. I had a pop up message with woocommerce notices, just saying the item has been added to cart, and with a close button using the javascript:void method. However it no longer works and when I look at the source code it's just out putting as "void(0)" instead of "javascript:void(0)"
I've tried other way such as just using # instead. Nothing works. Box won't close.
<div id="woocommerce-message">
<div class="close">
<a href="javascript:void(0)" class="closeEmbtn" onclick="closeEm()"
title="Close Notification"><i class="fa fa-times" aria-hidden="true"></i>
</a></div>
<div class="success-cart">
<div class="woocommerce-message">
<?php foreach ( $messages as $message ) : ?>
<?php echo wp_kses_post( $message ); ?>
<?php endforeach; ?>
</div>
</div>
<div class="message-cart-buttons">
<a class="button" href="/cart/">View Cart/Checkout</a>
Continue Shopping
</div>
</div>
<script type="text/javascript">
function closeEm() {
document.getElementById("woocommerce-message").style.display = "none";
}
</script>
I'm wanting just a way to close/hide the the "woocommerce-message" div when they click a close button.
--Edit --
I tried a different approach
<div class="close">
<a class="closeEmbtn" onclick="closeEm()" href="#" title="Close Notification"><i class="fa fa-times" aria-hidden="true"></i></a></div>
<script>
function closeEm() {
var x = document.getElementById("woocommerce-message");
x.style.display = "none";
}
</script>
But it's the "onclick=" isn't showing up in the source code either. Is there something in wordpress that could be blocking it?
I figured out a work around with a new script function
<script>
document.getElementById("close1").onclick = function() {
document.getElementById("woocommerce-message").style.display = "none";
}
</script>
which then doesn't have to rely on javscript:void(0) and onclick in the html.
But I am still curious to know why those elements suddenly disappeared from the output code
I have a template but this js template has error IDK what happens. I want to make this hide and show function sidebar with another js .
<div class="mdc-list-group sidebar">// this start sidebar
<nav class="mdc-list mdc-drawer-menu ">
<div class="mdc-list-item mdc-drawer-item">
<a class="mdc-drawer-link" href="<?php echo base_url(); ?>dinas">
<header class="mdc-toolbar mdc-elevation--z4 mdc-toolbar--fixed">
<div class="mdc-toolbar__row">
<section class="mdc-toolbar__section mdc-toolbar__section--align-start">
menu//this is for button to click show and hide
<span class="mdc-toolbar__input">
</span>
</section>
I add this code in my last script under </html>
<script>
function hideSidebar() {
$(".sidebar").hide();
}
hideSidebar();
</script>
but its still not work , whats wrong about this ? thanks you very much
You might be executing the Javascript part before the page has loaded, or before the DOM element you are trying to hide has already appeared.
function hideSidebar() {
$(".sidebar").hide();
}
$(document).ready(function(){
hideSidebar(); // only execute this after the page has loaded
});
I have html
<div class="save-ad-btn">
<a class="fi_make_favorite" title="Make favorite">xyz
</a>
<span class="label">Favorited</span>
</div>
and javascript
$('.save-ad-btn').find('span.label').text($(this).find('a.fi_make_favorite').attr('title'));
It works perfectly but I want whenever value of attribute attr('title') changes the html of span.label should change automatically.
Put the code in a function and call it on load and where you change the title
function copyTitle() {
$('.save-ad-btn').each(function() {
$(this).find('span.label').text(
$(this).find('a.fi_make_favorite').attr('title')
);
});
}
$(function() {
copyTitle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="save-ad-btn">
<a class="fi_make_favorite" title="Make favorite">xyz
</a>
<span class="label">Favorited</span>
</div>
Also look here:
Detecting attribute change of value of an attribute I made
Here is a simple example of what I'm trying to do, I have code in HTML and my aim is to disable the three hyperlinks #validate,#organize and #export:
<p id="menuitems" class="inline textcenter">
<a id="import" href="javascript:void(0);" onclick="switchScreen('Import');">IMPORT</a> >>
<a id="validate" href="javascript:void(0);" onclick="switchScreen('Validate');">VALIDATE</a> >>
<a id="organize" href="javascript:void(0);" onclick="switchScreen('Organize');">ORGANIZE</a> >>
<a id="export" href="javascript:void(0);" onclick="switchScreen('Export');">EXPORT</a>
</p>
When I'm trying to call the following, nothing happend. I'm using jQuery 1.11.4 and I've read that the methods for disabling event listeners have changed since 1.7. So I would like to know if there is an error in my JavaScript code below or some new changes:
$('#validate').off('click');
$('#organize').off('click');
$('#export').off('click');
One way would be to temporarily set the onclick to null, but store the original element onclick in the element or jquery object (e.g. data). With a helper function you can switch the elements on or off:
function setEnabled($a, Enabled ){
$a.each(function(i, a){
var en = a.onclick !== null;
if(en == Enabled)return;
if(Enabled){
a.onclick = $(a).data('orgClick');
}
else
{
$(a).data('orgClick',a.onclick);
a.onclick = null;
}
});
}
Which can be called with something like:
setEnabled($('#validate'), false);
(also works on jquery objects with multiple elements because of the each)
Example fiddle
You need to unbind the click event (which was declared inline) as follows.
document.getElementById("import").onclick = null;
document.getElementById("validate").onclick = null;
document.getElementById("organize").onclick = null;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="menuitems" class="inline textcenter">
<a id="import" href="javascript:void(0);" onclick="switchScreen('Import');">IMPORT</a> >>
<a id="validate" href="javascript:void(0);" onclick="switchScreen('Validate');">VALIDATE</a> >>
<a id="organize" href="javascript:void(0);" onclick="switchScreen('Organize');">ORGANIZE</a> >>
<a id="export" href="javascript:void(0);" onclick="switchScreen('Export');">EXPORT</a>
</p>
You could have jQuery take over your inline event, so that you can off() it later. Note that off() does remove the listener. You can't really disable it unless you put some logic in the handler itself to bail out if it shouldn't be running.
function switchScreen(screenName) {
console.log(screenName);
};
$(function() {
$('#menuitems a').each(function() {
var oldClick = this.onclick;
$(this).on('click', $.proxy(oldClick, this));
this.onclick = null;
});
$('#import').off('click');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="menuitems" class="inline textcenter">
<a id="import" href="javascript:void(0);" onclick="switchScreen('Import');">IMPORT</a> >>
<a id="validate" href="javascript:void(0);" onclick="switchScreen('Validate');">VALIDATE</a> >>
<a id="organize" href="javascript:void(0);" onclick="switchScreen('Organize');">ORGANIZE</a> >>
<a id="export" href="javascript:void(0);" onclick="switchScreen('Export');">EXPORT</a>
</p>
try unbind instead of Off since click event is defined inline, if click is attached using on then it will work with off.
Event attached through javascript doesn't recognize by jquery, so javascript and jquery mixed approached can't work properly - that's the reason jquery
.off('click'); doesn't detach click event.
Modify html:
<p id="menuitems" class="inline textcenter">
<a id="import" href="javascript:void(0);">IMPORT</a> >>
<a id="validate" href="javascript:void(0);">VALIDATE</a> >>
<a id="organize" href="javascript:void(0);">ORGANIZE</a> >>
<a id="export" href="javascript:void(0);">EXPORT</a>
</p>
Attach click event using jquery:
$(document).ready(function () {
$('#import').on("click", function () {
switchScreen('Import');
});
$('#validate').on("click", function () {
switchScreen('Validate');
});
$('#organize').on("click", function () {
switchScreen('Organize');
});
$('#export').on("click", function () {
switchScreen('Export');
});
});
Disable click event whenever required:
$('#import').off('click');
$('#validate').off('click');
$('#organize').off('click');
$('#export').off('click');
The above approach works for all standard browsers but just for IE we can have one more approach:
$('#validate').attr("disabled", "disabled");
$('#organize').attr("disabled", "disabled");
$('#export').attr("disabled", "disabled");
Inserting the following code does not work on IE7 and IE8. When clicking the link the share dialog should pop up but it does not in these browsers.
'<div class="facebookshare-box-wrapper">
<a href="#"
onclick="
window.open(
\'https://www.facebook.com/sharer/sharer.php?u=\'+encodeURIComponent(location.href),
\'facebook-share-dialog\',
\'width=626,height=436\');
return false;">
<span>Share on Facebook</span>
</a>
</div>'
On fiddle:
http://jsfiddle.net/Am4ND/
I fixed the problem, look at the [result on JsFiddle]http://jsfiddle.net/Am4ND/5/).
<a href="#" onclick="javascript:share();">
<span>Share on Facebook</span>
</a>
<script>
function share() {
window.open(
"https://www.facebook.com/sharer/sharer.php?u="+encodeURIComponent(location.href),
"facebooksharedialog",
"width=626,height=436");
return false;
}
</script>
I cleaned and refactored your code, be careful about parameter delimiters.