Details:
Hi experts. I want to change an existing HTML theme using only javascript, and I have problem in changing HTML element's href using javascript. But it seems I can't even get the elements by ClassName because the console.log value of javascript code below shows 0 length. Please help how should I fix the code.
(Note that I can't edit the existing HTML code, only can write custom code of javascript). Best regards
My javascript is as below:
var x8 = document.getElementsByClassName("slrofrpg-srvcs-backbtn");
console.log("length=",x8.length); --1st console
if (x8.length > 0){
console.log("ENTERED. length=", x8.length); --2nd console
x8[0].href = "javascript:history.back()";
}
My HTML is as below (some part of it):
<div class="slrofrpg-service-btn">
<a class="slrofrpg-srvcs-backbtn" href="javascript:void(0);">Back
</a>
<!-- react-text: 219 -->
<!-- /react-text -->
<a class="slrofrpg-srvcs-offerbtn" href="javascript:void(0);">Send now
</a>
</div>
1st console log result:
length=0
2nd console log result: No result
The code is working fine here. Your script is running before the the loading of html.You can
Move your <script> tag at end of the <body>
Or use the window.onload event
window.onload = function(){
var x8 = document.getElementsByClassName("slrofrpg-srvcs-backbtn");
console.log("length=",x8.length);
if (x8.length > 0){
console.log("ENTERED. length=", x8.length);
x8[0].href = "javascript:history.back()";
}
}
<div class="slrofrpg-service-btn">
<a class="slrofrpg-srvcs-backbtn" href="javascript:void(0);">Back
</a>
<!-- react-text: 219 -->
<!-- /react-text -->
<a class="slrofrpg-srvcs-offerbtn" href="javascript:void(0);">Send now
</a>
</div>
It seems you are running the javascript before the dom is loaded. Add javascript or add the external js file near the closing end of body tag
<body>
// html code
<script>
//js code here
</script>
</body>
var x8 = document.getElementsByClassName("slrofrpg-srvcs-backbtn");
console.log("length=", x8.length);
if (x8.length > 0) {
console.log("ENTERED. length=", x8.length);
x8[0].href = "javascript:history.back()";
}
<div class="slrofrpg-service-btn">
<a class="slrofrpg-srvcs-backbtn" href="javascript:void(0);">Back
</a>
<!-- react-text: 219 -->
<!-- /react-text -->
<a class="slrofrpg-srvcs-offerbtn" href="javascript:void(0);">Send now
</a>
</div>
Related
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 am struggling with google badge. i added: java script to footer Miscellaneous HTML. made the following changes in red.
<!-- BEGIN: Google Trusted Stores -->
<script type="text/javascript">
var gts = gts || [];
gts.push(["id", "XXXXXXX"]);
gts.push(["badge_position", "BOTTOM_RIGHT"]);
gts.push(["locale", "en_US"]);
(function() {
var gts = document.createElement("script");
gts.type = "text/javascript";
gts.async = true;
gts.src = "https://www.googlecommerce.com/trustedstores/api/js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(gts, s);
})();
</script>
<!-- END: Google Trusted Stores -->
..............................................................
the second part: what is the path to my to my success page in magento 2.1?
google requires some information, wwhat is the best way to obtain this, are these my attribute listed in my magento?
<!-- START Google Trusted Stores Order -->
<div id="gts-order" style="display:none;" translate="no">
<!-- start order and merchant information -->
<span id="gts-o-id">MERCHANT_ORDER_ID</span>
<span id="gts-o-email">CUSTOMER_EMAIL</span>
<span id="gts-o-country">CUSTOMER_COUNTRY</span>
<span id="gts-o-currency">CURRENCY</span>
<span id="gts-o-total">ORDER_TOTAL</span>
<span id="gts-o-discounts">ORDER_DISCOUNTS</span>
<span id="gts-o-shipping-total">ORDER_SHIPPING</span>
<span id="gts-o-tax-total">ORDER_TAX</span>
<span id="gts-o-est-ship-date">ORDER_EST_SHIP_DATE</span>
<span id="gts-o-est-delivery-date">ORDER_EST_DELIVERY_DATE</span>
<span id="gts-o-has-preorder">HAS_BACKORDER_PREORDER</span>
<span id="gts-o-has-digital">HAS_DIGITAL_GOODS</span>
<!-- end order and merchant information -->
<!-- start repeated item specific information -->
<!-- item example: this area repeated for each item in the order -->
<span class="gts-item">
<span class="gts-i-name">ITEM_NAME</span>
<span class="gts-i-price">ITEM_PRICE</span>
<span class="gts-i-quantity">ITEM_QUANTITY</span>
<span class="gts-i-prodsearch-id">ITEM_GOOGLE_SHOPPING_ID</span>
<span class="gts-i-prodsearch-store-id">ITEM_GOOGLE_SHOPPING_ACCOUNT_ID</span>
</span>
<!-- end item 1 example -->
<!-- end repeated item specific information -->
</div>
<!-- END Google Trusted Stores Order -->
Thank you
I have my header.php containing a button which triggers the sidebar menu to appear. Button and sidebar are visible only for logged in users. At the end of this block there is a little piece of code that adds the class "active" to my sidebar for making it visible. It's something like:
<div id="header">
<!-- if is_user_logged_in -->
<a id="menu-toggle" href="#" type="button">
<i class="sprite-t-toggle-side"></i>
</a>
<!-- sidebar menu-->
<div id="sidebar-wrapper"><!-- menu content --></div>
<script>
var $menu = $("#sidebar-wrapper");
$("#menu-toggle").on("click", function(e) {
e.preventDefault(),
$menu.toggleClass("active");
});
</script>
</div>
Now, I make my users login via AJAX and once they're logged I just refresh my header block for displaying button and sidebar. I use this line of code to do so in my AJAX success:
success: function(data){
if (data.loggedin == true){
$("#header").load(location.href + " #header");
}
}
Until here everything is fine, users are logged and button is displayed but when I click on it nothing happens. Sidebar won't appear and If I look at the code my little function, at the end of header, is missing. Otherwise, If I reload the whole page it works.
What's happening? What am I doing wrong?
Why reload the entire header. Why not just grab the logged in part of it
I think problem is that you are reloading the entire #header you need to just reload part of it.
$("#header").load(location.href + " #header"); <- this will replace all html in
the #header
<div id="header">
<div id="loadajax"></div> <!-- Put loaded ajax in here --->
<!-- if is_user_logged_in -->
<a id="menu-toggle" href="#" type="button">
<i class="sprite-t-toggle-side"></i>
</a>
<!-- sidebar menu-->
<div id="sidebar-wrapper"><!-- menu content --></div>
<script>
function runMenu() {
var $menu = $("#sidebar-wrapper");
$("#menu-toggle").on("click", function(e) {
e.preventDefault(),
$menu.toggleClass("active");
});
}
runMenu();
</script>
</div>
success: function(data){
if (data.loggedin == true){
$("#loadajax").load(location.href + " #header");
runMenu();
}
}
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>
Here is my problem:
I have a script my nimbit store gave to me, I installed it on my store.html and it's working, my problem is when store.html is loaded through ajax the script - it is not showing.
Help please! Go easy on me I am not a professional developer or programmer!
Thanks a lot in advance.
This is the script my nimbit store gave to me:
<script src="http://www.nimbitmusic.com/tags/javascript/artists/theit_boy.1/store/"></script>
I have installed it on my store.html
[1]: http://theitboymusic.com/store.html and it works, but if i loaded through the store button on my [index.html][1] is disappearing.
Thanks in advance
<!-- ############ ajax content (This content will be loaded by ajax) ############ -->
<div id="ajax-content" class="page-container">
<!-- ############ container ############ -->
<div class="container clearfix">
<!-- ############ content header ############ -->
<header class="content-header">
<h1 class="content-title">STORE</h1>
<span class="sub-heading">Purchase The IT_Boy Music</span>
<hr class="content-line">
</header>
<!-- /content header -->
<script src="http://www.nimbitmusic.com/tags/javascript/artists/theit_boy.1/store/"></script>
my custom.js code:
// Custom pages
// create a new instance of the plugin
var custom_page = new $.PageLoader($('.page-by-ajax'), {
container_class : 'custom-container',
top_offset : -settings.nav_height,
deeplinking : true,
debug : false,
load_from_hash : true,
load_start : function(){
// I get fired when the ajax is starting load content
// Show preloader
NProgress.start();
},
load_end : function(e){
// I get fired when the ajax is ending load content
// Init scripts
scripts(e);
// Hide preloader
NProgress.done();
},
close : function(){
// Scroll to portfolio filter
$.scrollTo('#custom-page', 400,{offset: {top:-settings.nav_height, left:0}});
}
});
})();
});
and in my index.html
<li>
<a href="store.html" class="page-by-ajax" data-ajax-options='{"target" :"#custom-page"}'>STORE</a
</li>
Your "Content-Type" of "Response Header" is "text/plain", but it should be "text/html"