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();
}
}
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");
}
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'm trying to build a page that contains multiple inner pages - a front page that displays by default, and child pages which display when relevant links on the front page are clicked.
What I am trying to achieve is that when a page-link element is clicked, the class active-page is added to the inner page with the same id, and the intro section has a class off-canvas added, & the active page is set in localStorage - so that if for any reason the page is refreshed, the last page that was being viewed is displayed.
Alternatively, when a lnk-rtn-home element is clicked, the current inner-page should lose the active page class while front-page loses its off-canvas class. Likewise, this should update the localStorage.
The HTML structure is as follows:
<body>
<div class="container">
<section id="intro" class="front-page row">
{{ content }}
<a data-id='about-me' class='page-link'>About Me</a>
{{ more content }}
<a data-id='contact' class='page-link'>Contact</a>
</section>
<section id="about-me" class="inner-page row">
{{ content }}
<a class='lnk-rtn-home'>Return Home</a>
</section>
<section id="contact" class="inner-page row">
{{ content }}
<a class='lnk-rtn-home'>Return Home</a>
</section>
</div>
</body>
The current JS stands at
$(document).ready(function(){
var activePageSet = localStorage.getItem('current-page');
// Check if an active page has been set
if (activePageSet) {
$('#' + activePageSet).addClass('active-page');
$('#intro').addClass('off-canvas');
}
// Links to inner pages
$('.page-link').click(function() {
var currentPage = $(this).data("id");
$('#' + currentPage).addClass("active-page");
$('#intro').addClass('off-canvas');
localStorage.setItem('current-page', JSON.stringify(currentPage));
});
// Link to return home
$('.lnk-rtn-home').click(function() {
if ($('.inner-page').hasClass('active-page')) {
$(this).removeClass('active-page');
localStorage.removeItem('current-page');
}
$('#intro').removeClass('off-canvas');
});
});
No amount of playing around with this has got it working, and at this stage I'm lost as to how to achieve it.
This problem can be solved with using only 1 class. You have made your code more complex by using 2 classes. I replaced .active-page and .off-canvas with the class .hidden. This gives a simpler code to follow.
var activePageSet = null; //localStorage.getItem('current-page');
//not able to do localStorage in snippet
// Check if an active page has been set
if (activePageSet) {
$('#' + activePageSet).removeClass('hidden');
$('#intro').addClass('hidden');
}
// Links to inner pages
$('.page-link').click(function() {
var activePageId = $(this).data("id");
$('#' + activePageId).removeClass("hidden");
$('#intro').addClass('hidden');
//localStorage.setItem('current-page', JSON.stringify(activePageId));
});
// Link to return home
$('.lnk-rtn-home').click(function() {
var activePage = $(this).parent();
activePage.addClass('hidden');
$('#intro').removeClass('hidden');
//localStorage.removeItem('current-page');
});
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<section id="intro" class="front-page row ">
{{ intro content }}
<a data-id='about-me' class='page-link'>About Me</a>
{{ more content }}
<a data-id='contact' class='page-link'>Contact</a>
</section>
<section id="about-me" class="inner-page row hidden">
{{ about content }}
<a class='lnk-rtn-home'>Return Home</a>
</section>
<section id="contact" class="inner-page row hidden">
{{ contact content }}
<a class='lnk-rtn-home'>Return Home</a>
</section>
</div>
you just need to select right element for hasClass condition.
You can use a parent, like this:
$(document).ready(function(){
// Links to inner pages
$('.page-link').click(function() {
var currentPage = $(this).data("id");
$('#' + currentPage).addClass("active-page");
$('#intro').addClass('off-canvas');
//localStorage.setItem('current-page', JSON.stringify(currentPage));
});
// Link to return home
$('.lnk-rtn-home').click(function() {
var jqSection = $(this).parent();
if (jqSection.hasClass('active-page')) {
jqSection.removeClass('active-page');
localStorage.removeItem('current-page');
}
$('#intro').removeClass('off-canvas');
});
});
Here is an example: https://plnkr.co/edit/xfgHpWdDpnDTyjLYYrGd?p=preview
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"
I have this page which loads quotes. It has a search form wherein if the user types in the search keyword, it will load the results via ajax. Now, if I click on the link which should load the default page with the Quotes, instead of the search results page, nothing happens.
If I am on the home/default page itself, and click on the link, it will display a random quote, but once it displays the search page, if I click on the link to display a random quote, nothing happens. Firebug shows that the function isn't being executed.
jQuery code:
function loadQuotes() {
$("#bquote").load("quotes_in.php");
}
$("a#main").click(function() {
$(this).addClass("current");
$(".toggleDiv").slideUp(600);
loadQuotes();
});
loadQuotes(); //call it once on load
$(".bsearch").keydown(function() {
//create post data
var postData = {
"search" : $(this).val()
};
//make the call
$.ajax({
type: "POST",
url: "quotes_in.php",
data: postData, //send it along with your call
success: function(response){
setTimeout(function() {
$('#left').html(response);
$("div#smore").hide();
}, 250);
}
});
})
HTML:
<!-- Begin Left Column -->
<div id="left">
<!-- Begin Panel -->
<div class="check">
<p><input type="checkbox" value="Quote" name="quote" id="quote" checked /> <label for="quote">Quote</label></p>
<p><input type="checkbox" value="Reference" name="reference" id="reference" checked /> <label for="reference">Reference</label></p>
</div>
<!-- End Panel -->
<!-- Begin Quote -->
<blockquote id="bquote">
</blockquote>
<!-- End Quote -->
</div>
<!-- End Left Column -->
<!-- Begin Naviagtion -->
<div id="navigation">
<ul>
<li><a id="main">Another?</a></li>
<li><a id="bsearch">Search</a></li>
<li><a id="babout">About</a></li>
<li><a id="bcontact">Contact</a></li>
</ul>
</div>
<!-- End Naviagtion -->
PHP search:
public function formatSearch($row, $search)
{
$cQuote = $this->highlightWords(htmlspecialchars($row['cQuotes']), $search);
return "<div class=\"swrap\">"
. "<p id=\"s_quotes\"><img src=\"image/list1.png\" alt=\"b\" style=\"position:relative; top:2px;\"> " . $cQuote . " </p>"
. "<div id=\"smore\"><p id=\"s_arabic\">" . $this->h($row['cArabic']) . "</p>"
. "<p id=\"s_author\"><b>~</b> " . $this->h($row['vAuthor']) . "</p>"
. "<p id=\"s_reference\"><span class=\"source\">Source:</span> " . $this->h($row['vReference']) . "</p></div></div>"
. "<img src=\"image/sep.png\" style=\"position:relative; left: 600px;\">";
}
The new results aren't going to be acknowledged by the JavaScript as the script only acknowledges what HTML is there upon the page load. For your function to be able to 'see' HTML generated via AJAX Functions, you need to use he Jquery live function http://api.jquery.com/live/
Convert your current click function to something like this
$('a#main').live('click', function() {
$(this).addClass("current");
$(".toggleDiv").slideUp(600);
loadQuotes();
});