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
});
Related
I am new to bootstrap and jquery and javascript and I am working on a website and I am down to one issue . . . I need the navbar at the top to load in a collapsed state on an Extra Small screen. Right now, the bar goes vertical on an XS screen, but I want it to load in the collapsed state so that the user has to click the "three bar icon" on the right to load the page. No matter what I do, I cannot get the navbar to load correctly. If I load it collapsed on the small screen, it becomes invisible on a large screen. I have been working on this for 2 days now. I know it is something simple, but I just cannot figure it out. Can someone else please help.
Here is the relevant code …
<body id="page-top" data-spy="scroll" data-target="#nav-target">
<header id="header">
<!-- Navigation
================================================== -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<ul class="nav navbar-nav">
<li>Watch It Outside</li>
<li id="drop"></li>
<li id="drop1">Home</li>
<li id="drop2">City Of Boston News</li>
<li id="drop3">Boston Public Gardens</li>
<li id="drop4">Film Information</li>
<li id="drop5">Registration</li>
</ul>
</nav>
</header>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Javascript and Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
// Scrollspy fluide
$(function () {
$('li>a').on('click', function (e) {
var hash = this.hash;
$('html, body').animate({
scrollTop: $(this.hash).offset().top
}, 1000, function () {
window.location.hash = hash;
});
});
});
</script>
<script>
$(function() {
$('#drop').click(function() {
$('#drop1').collapse('toggle');
$('#drop2').collapse('toggle');
$('#drop3').collapse('toggle');
$('#drop4').collapse('toggle');
$('#drop5').collapse('toggle');
});
$('#drop1').click(function() {
$('#drop1').collapse('toggle');
$('#drop2').collapse('toggle');
$('#drop3').collapse('toggle');
$('#drop4').collapse('toggle');
$('#drop5').collapse('toggle');
});
$('#drop4').click(function() {
$('#drop1').collapse('toggle');
$('#drop2').collapse('toggle');
$('#drop3').collapse('toggle');
$('#drop4').collapse('toggle');
$('#drop5').collapse('toggle');
});
$('#drop5').click(function() {
$('#drop1').collapse('toggle');
$('#drop2').collapse('toggle');
$('#drop3').collapse('toggle');
$('#drop4').collapse('toggle');
$('#drop5').collapse('toggle');
});
});
</script>
I am also getting a weird error that has recently popped up in the site where I now have to click a link twice to get it to close the first time. From there, every click toggles it collapsed and expanded, but the first one takes 2 clicks to collapse the navbar. (I don't know what I changed to cause this as it didn't start out that way)
Try something like
if (device.width < 800) {
$("nav").addClass("collapsed");
}
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
How does one execute a shortcode, which is placed in a tab, only when the user clicks on the Tab's Title. How do we do this for five tabs? MY objective is to reduce load time of me website. So, only that content which the user wants must load when he clicks on the tab.
I'm fairly certain the best way to do this is by utilizing Wordpress's admin-ajax.php. I've searched a great deal. And I've found most of the code (I think) to create the AJAX tabs. But, when I fire the code it doesn't show up. Rather the HTML shows us, the AJAX doesn't.
$(document).ready(function() {
$('.my_tabs a').click(function(e) {
e.preventDefault();
var tab_id = $('this').attr('id');
$.ajax({
type: "POST",
url: "wp-admin/admin-ajax.php",
dataType: 'html',
data: ({
action: 'my_tab_menu',
id: tab_id
}),
success: function(data) {
$('#my_tab' + tab_id).html(data);
},
error: function(data) {
alert("Error!");
return false;
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my_tabs">
Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
</div>
<div class="my_section" id="my_tab1">
<?php echo do_shortcode ('[shortcode-1]'); ?>
</div>
<div class="my_section" id="my_tab2">
<?php echo do_shortcode ('[shortcode-2]'); ?>
</div>
<div class="my_section" id="my_tab3">
<?php echo do_shortcode ('[shortcode-3]'); ?>
</div>
<div class="my_section" id="my_tab4">
<?php echo do_shortcode ('[shortcode-4]'); ?>
</div>
<div class="my_section" id="my_tab5">
<?php echo do_shortcode ('[shortcode-5]'); ?>
</div>
I add all the code directly into the page using a page-builder. So, I'm not using functions.php to add_action for this particular tab that I'm trying to implement.
I found all the code from a similar post on stackover:
Ajax tabs (wordpress)
They call template_parts into the tabs. Where as I want to execute a shortcode.
I'm what you'd call a coding bimbo. All help shall be much appreciated.
Thank you. And if you've managed to read till here, you deserve to have a pleasant day. :D
Okay, so you can't achieve it the way you have laid your template. As soon as you echo the shortcode and the browser renders the page, the shortcode contents must have printed. You need to create a custom-page-template.php, create a page and on that page you need to send the shortcode handler as soon as you click on the tab through GET or POST method using ajax.
In your Custom Template you receive the [shortcode-1]. An example code would be like you see below:
<?php
/*
Template Name: Shortcode Processor
*/
$current_shortcode = $_POST['shortcode_name'];
?>
<div id="shortcode-contents">
<?php echo do_shortcode($current_shortcode); ?>
</div>
Now you have the response in your Ajax Call. You can now inject the success html inside your desired tab.
Try
<button class="tabs" id="my-tabid1" data-target=".my-section1.box">Tab 1</button>
<button class="tabs" id="my-tabid2" data-target=".my-section2.box">Tab 2</button>
<button class="tabs" id="my-tabid3" data-target=".my-section3.box">Tab 3</button>
<div class="my_section1 box active" id="my-tab1">
<?php echo do_shortcode ('[shortcode-1]'); ?>
</div>
<div class="my-section2 box" id="my-tab2">
<?php echo do_shortcode ('[shortcode-1]'); ?>
</div>
<div class="my-section3 box" id="my_tab3">
<?php echo do_shortcode ('[shortcode-1]'); ?>
</div>
<style>
.box {
display: none;
}
.box.active {
display: block;
}
</style>
<script>
$('.tabs').on('click', function(){
var $target = $($(this).data('target'));
$target.siblings().removeClass('active');
$target.addClass('active');
});
</script>
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>