I want to create a website which will carry out the same navbar on each webpage. I Have managed to create the same navbar all over using simple jquery techniques. My navbar has a sidebar element with bootstrap styling incorporated. to the right of the sidebar, I have to generate unique heading which corresponds to the webpage click on the navbar. I would like to know is it a way out to create different headings using javascript or jquery.
nav.html:
<div class="container-fluid">
<div class="row">
<div class="col-md-2 col-sm-4 sidebar1">
<div class="logo">
<img src="images/group_logo.jpg" class="img-responsive align-middle" alt="Logo">
<hr align="left" width="200px;">
</div>
<br>
<div class="left-navigation">
<ul class="list">
<!--<h5><strong>Actionlist</strong></h5>-->
<li><i class="glyphicon glyphicon-th-large"></i>Dashboard</li>
<li><i class="glyphicon glyphicon-certificate"></i>Seating</li>
<li><i class="glyphicon glyphicon-book"></i>Report</li>
</ul>
</div>
</div>
<div class="col-md-10 col-sm-8 main-content">
<!--Main content code to be written here -->
<h1>
<i class="glyphicon glyphicon-menu-hamburger"></i>
Dashboard
</h1>
<hr align="left" width="100%">
<!-- Create action buttons -->
</div>
</div>
</div>
In index.html I have the below code under body tag to load the container. How can I create the unique heading for different HTML pages?
<div id="nav-placeholder"></div>
<script>
$.get("nav.html", function(data) {
$("#nav-placeholder").replaceWith(data);
});
</script>
You can use the filename to set the header once the page is loaded.
<h1>
<i class="glyphicon glyphicon-menu-hamburger"></i>
<span id="nav-placeholder">Dashboard</span>
</h1>
And then use the script like this -
<script>
$(document).ready(function() {
var navPlaceholder= "";
var url = window.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1);
switch(filename) {
case "seaing.html":
navPlaceholder = "Seating";
break;
case "report.html":
navPlaceholder = "Report";
break;
default:
navPlaceholder = "Dashboard";
break;
}
$("#nav-placeholder").replaceWith(navPlaceholder);
});
</script>
Untested, but this should give you the idea and steer you in the right direction.
Store the link in a variable;
Store the title of the link in a variable;
Demonstration:
<script>
$('.left-navigation a').on('click', function(){
var getUrl = $(this).attr('href'),
getTitle = $(this).text();
/* Log variable to console - remove for production */
console.log('The Url:',getUrl);
console.log('The Title:',getTitle);
$.get(getUrl, function(data) {
$("#nav-placeholder").replaceWith(data);
$('#page-title').text(getTitle); /* Update the page title */
});
});
</script>
To target the right element in order to update the page title, update your html structure as follows:
<h1><i class="glyphicon glyphicon-menu-hamburger"></i> <span id="page-title">Dashboard</span></h1>
We don't want the script to remove the glyphicon icon nested within your h1 element, so we wrap the text that needs to update in an element we can target specifically (#page-title).
Related
I am using JQuery SlideUp and slideDown methods to show/hide panels. How can load or display the first record Contact information as a default?
Right now it loads blank because i set the panel display:none:
<div class="panel rpspanel panel-default" id="#item.ID" style="display: none"> otherwise it loads all if i have multiple results.
Need help to load the first one when the page loads. And the rest on click event which working perfect.
Left Panel:
Pass the item id (or any unique value) to the li in data-id attribute
<ul id="treeview">
#foreach (var item in rpInfo)
{
<li data-expanded="true" class="panel-handler" data-id="#item.id">
<i class="fa fa-check-circle"></i>#item.PartyName
<ul>
<li data-expanded="true"> <i class="fas fa-check-circle"></i> #item.ContactName </li>
</ul>
</li>
}
</ul>
Right Panel:
id attribute to all panels. the same id which i have passed in the left panel.
#foreach (var item in rpInfo)
{
var DeleteModal = "#myModal" + item.ID;
var mid = "myModal" + item.ID;
<div class="panel rpspanel panel-default" id="#item.ID" style="display: none">
Contact Information</h4>
</div>
<div class="panel-body">
<div class="card card-understated">
<div class="card-heading">
<h4>#(Localizer["Contact Preview "])</h4>
</div>
<div class="card-body">
<p>
#item.ContactName<br>
#item.ContactTitle<br>
#item.PartyName<br>
#item.AddressLine1<br />
#item.City, #item.State #item.Country
</p>
</div>
</div>
</div>
</div>
}
Jquery script:
On on left panel on li click get the data-id attribute value.
Hide all panels .
Show the panel with the specified id attribute.
$(document).ready(function() {
$(".panel-handler").click(function() {
let id = $(this).data("id");
$(".rpspanel").slideUp();
$("#" +id).slideDown();
});
});
Make a separate function for the slideDown() functionality based on id, and pass id of the first .panel-handler on load of document:
$(document).ready(function() {
$(".panel-handler").click(function() {
showInfo($(this).data("id"));
});
function showInfo(id){
$(".rpspanel").slideUp();
$("#" +id).slideDown();
}
// For first time
showInfo($(".panel-handler").eq(0).data("id"))
});
i have seperate sidebar and content when any menu from sidebar is clicked it should show only proper content without page refreshing it works but in a wrong way like this
my sidebar is that
side.html
<div class="row2 col-2">
<div class="row align-items-start">
<div class="col-12 side-bar p-0">
<ul class="side-bar-items p-0">
<li class="side-bar-item">
<a href="{% url 'dashboard' %}" title="" class="active">
<i class="fa fa-font-awesome"></i>
Boshqaruv paneli
</a>
</li>
<li class="side-bar-item" id="loadbasic">
<a href="{% url 'contacts' %}" title="" class="navlink">
<i class="fa fa-font-awesome"></i>
Aloqalar
</a>
</li>
</ul>
<div>
</div>
my js code
$('.row2').on("click", ".navlink", function (e) {
e.preventDefault(); // cancel click
var page = $(this).attr('href');
$('.row2').load(page);
});
if you notice when contacts is clicked the url did not change. How can i solve this problem?
my contacts.html page looks like this
{% include 'dashboard/header.html' %}
{% include 'dashboard/side.html' %}
<!-- Dashboard -->
<div class="row3 container-fluid">
<!-- Counting row -->
<div class="row counting-row pb-5">
<div class="col-10 offset-2 pt-0 pl-5">
<div class="row justify-content-between start-dash mb-4">
thanks beforehand!
You are trying to load the content inside the sidebar where the navlinks are available instead of loading on the sidebar content. Pls try to change the DOM id or class where you need to display the content.
$('.row2').load(page); with
$(ElementClass).load(page) (ie) Here ElementClass is which you have for Sidebar Content where the page need to load.
You can update the url in the address bar without reloading by
$('.row2').on("click", ".navlink", function (e) {
e.preventDefault(); // cancel click
var page = $(this).attr('href');
$(ElementClass).load(page);
history.pushState({}, null, page);
});
Thanks.
Here when I am clicking on More Info. I want an alert showing the value present inside h3 tags. How can I do that ??
Here is the html i am working on
<div class="col-lg-4 col-xs-6">
<div class="small-box bg-red">
<div class="inner">
<h3>Text 1</h3>
<p>fhjh</p>
</div>
More info <i class="fa fa-arrow-circle-right"></i>
</div>
</div>
so what you want is to click on the small-box-footer link and alert the 'Text 1'?
$(document).ready(function(){
$('.small-box-footer').on('click', function(evt){
//if you don't want the default event
evt.preventDefault();
//show the alert text
alert($('.inner h3').text());
})
})
you can try code below
$(document).ready(function(){
$('.small-box-footer').on('click', function(e){
e.preventDefault();
alert($(this).parents('.small-box').find('h3').text());
})
})
Working Demo
you can try :
$('.small-box-footer').click(function(e){
var text = $(this).prev().children().first().text();
console.log(text);
});
you need to have an event listener for the onclick event when someone clicks on the "more info".
you'll then need to get the closest query the dom (you can traverse upwards or alternatively go from the DOM straight to a specific element... it's cheaper to go up).
example...
Using Jquery
$('.small-box-footer').click(function(ev) {
ev.preventDefault();
// find the h3
var text = $('.inner h3').text();
alert(text);
});
Simple as just grabbing the h3 directly, skip traversing:
window.showTitle = function() {
alert($('h3').text())
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-4 col-xs-6">
<div class="small-box bg-red">
<div class="inner">
<h3>Text 1</h3
<p>fhjh</p>
</div>
<a href="#" class="small-box-footer" onclick="showTitle()">More info <i class="fa fa-arrow-circle-right"></i>
</a>
</div>
</div>
I am trying to create a toggle menu bar for php website.
html code
<div class="row">
<div class="col-sm-4 col-md-3 sidebar">
<div class="mini-submenu" >
<img src="icons/nav_icon.png" height="30" width="30" >
</div>
<div class="list-group">
<span href="#" class="list-group-item">
Submenu
<span class="pull-right" id="slide-submenu"><i class="fa fa-times"></i></span>
</span>
<i class="fa fa-comment-o"></i> Lorem ipsum
</div>
</div>
</div>
script code
$(function(){
$('#slide-submenu').on('click',function() {
$(this).closest('.list-group').fadeOut('slide',function(){
$('.mini-submenu').fadeIn();
});
});
$('.mini-submenu').on('click',function(){
$(this).next('.list-group').toggle('slide');
$('.mini-submenu').hide();
})
})
At present the one that i have works fine but the problem is that when the first time i open the page the submenu that is under the nav_bar image gets opened automatically and when i click on cross button
then the nav_bar image appears like this
but what i want is opposite to it. i wish that whenever the page is loaded the image should appear first and when i click on the image the submenu should appear under it.
change your script to
$(function(){
$('.list-group').hide();
$('.mini-submenu').show();
$(function(){
$('#slide-submenu').on('click',function() {
$(this).closest('.list-group').fadeOut('slide',function(){
$('.mini-submenu').fadeIn();
});
});
$('.mini-submenu').on('click',function(){
$(this).next('.list-group').toggle('slide');
$('.mini-submenu').hide();
})
})
});
It will work fine :
JavaScript:
(function($){
$('.list-group').hide();
$('#slide-submenu').on('click',function() {
$(this).closest('.list-group').fadeOut('slide',function(){
$('.mini-submenu').fadeIn();
});
});
$('.mini-submenu').on('click',function(){
$(this).next('.list-group').toggle('slide');
$('.mini-submenu').hide();
})
})(jQuery);
I have a piece of code:
$("body").on("click", ".reply-button", function(){
alert("test");
});
That is suppose to alert me when I click on an element that is generated on the fly (it is not part of the DOM when this code is executed).
Sometimes it works just as it's suppose to. I click the button and a little alert pops up. However, other times it stop working. Nothing I bind to it will work. If I bind to the container div (also generated on the fly), it does work, but not if I change the handler to incorporate button.
I am asking for what could be the possible reasons for this error? I do not know how to go about debugging this. My first guess was that it was something due to stopImmediatePropagation or stopPropagation but I couldn't find that being used in the same area.
Does anyone have any idea on how I should go about debugging this?
EDIT:
How is the DOM being generated?
I get the HTML from a template that's hidden.
var html = $("#template").html();
Then I append the template to a div container
$("#container").append(html);
EDIT2:
Here is the template being pulled:
<div id="tweets-container" class="feed-wrapper">
</div>
<div id="tweet-template" style="display:none;">
<!-- Tweet 1 -->
<div class="tweet animated" data-scannedTweetId="s_id">
<!-- User -->
<div class="tweet-user">
<!-- User picture -->
<img class="tweet-user-picture" src="s_twt_owner_profile_img_url" />
<!-- User info -->
<div class="tweet-user-info">
<!-- User name -->
<div class="tweet-user-info-name">
s_twt_owner_name (#s_twt_owner_sn)
</div>
<!-- User biography -->
<div class="tweet-user-info-biography">
s_twt_owner_desc
</div>
</div>
</div>
<!-- User statistics (following, followers, and tweets) -->
<span class="tweet-statistics animated">
<div class="following">
<div class="statistic-count">s_twt_owner_num_following</div>
<div class="statistic-label">following</div>
</div>
<div class="followers">
<div class="statistic-count">s_twt_owner_num_follower</div>
<div class="statistic-label">followers</div>
</div>
<div class="tweets">
<div class="statistic-count">s_twt_owner_num_twt</div>
<div class="statistic-label">tweets</div>
</div>
</span>
<!-- Tweet bars/graph -->
<div class="side-information animated">
<div class="bar-wrapper">
<!-- Actual bars -->
<div class="bars">
<div class="bar big-bar bar-green" style="height: tqes_heightpx; background: tqes_color;" data-toggle="tooltip" data-placement="top" title="tq_engage_score"></div>
<div class="bar bar-yellow" style="height: tqrs_heightpx; background: tqrs_color;" data-toggle="tooltip" data-placement="top" title="tq_relevancy_score"></div>
<div class="bar bar-light-green" style="height: sks_heightpx; background: sks_color;" data-toggle="tooltip" data-placement="top" title="s_klout_score"></div>
<div class="bar bar-green" style="height: sls_heightpx; background: sls_color;" data-toggle="tooltip" data-placement="top" title="s_legitimacy_score"></div>
<div class="bar bar-gray" style="height: tqgs_heightpx; background: tqgs_color;" data-toggle="tooltip" data-placement="top" title="tq_geography_score"></div>
</div>
<!-- Labels that correspond with each bar -->
<div class="bar-labels">
<div class="bar-label big-bar-label" data-toggle="tooltip" data-placement="bottom" title="Score">tq_engage_score</div>
<div class="bar-label-icon" style="font-size: 12px; color: #000;" data-toggle="tooltip" data-placement="bottom" title="Relevancy">
<i class="fa fa-bullseye"></i>
</div>
<div class="bar-label-icon" data-toggle="tooltip" data-placement="bottom" title="Influence">
<i class="fa fa-users"></i>
</div>
<div class="bar-label-icon" data-toggle="tooltip" data-placement="bottom" title="Legitimacy">
<i class="fa fa-check-circle"></i>
</div>
<div class="bar-label-icon" data-toggle="tooltip" data-placement="bottom" title="Geography">
<i class="fa fa-map-marker"></i>
</div>
</div>
</div>
<!-- Notes below the bars/graph -->
<div class="explanations">
<!-- Note below the bars/graph -->
<div class="explanation">
<div class="explanation-check"><i class="fa fa-first-comment"> </i>
<div class="explanation-text">
comment_one
</div>
</div>
</div>
<!-- Note below the bars/graph -->
<div class="explanation">
<div class="explanation-check"><i class="fa fa-second-comment"> </i>
<div class="explanation-text">
comment_two
</div>
</div>
</div>
</div>
</div>
<!-- Tweet score -->
<div class="score-wrapper">
<div class="score animated">tq_engage_score</div>
</div>
<!-- Tweet content -->
<div class="tweet-content">
s_twt_text
</div>
<!-- Time since tweet was posted -->
<div class="tweet-time-elapsed">
s_twt_time
</div>
<!-- Area below tweet with reply textarea and buttons -->
<div class="tweet-reply-section animated">
<!-- Reply textarea -->
<textarea class="tweet-reply animated">#s_twt_owner_sn </textarea>
<!-- Buttons -->
<div class="buttons animated">
<!-- Small buttons on top of reply button -->
<div class="top-buttons">
<span class="character-count">
</span>
</div>
<!-- Reply button -->
<div class="reply-button">
Reply <i class="fa fa-reply"></i>
</div>
</div>
</div>
</div>
</div>
JavaScript:
/**
* Add a tweet to the feed.
*/
function _addTweetToFeed(tweet, keywords) {
/** Get the tweet template */
var tweetHtml = $('#tweet-template').html();
// add score heights and colors properties to the tweet
tweet = _setScoreBars(tweet);
/** Linkify elements of the tweet */
tweet.s_twt_text = twitterify(tweet.s_twt_text); // the tweet
tweet.s_twt_owner_desc = twitterify(tweet.s_twt_owner_desc);
// fix search terms to be highlighted
tweet.s_twt_text = _highlightSearchTerms(tweet.s_twt_text, keywords); // the tweet
tweet.s_twt_owner_desc = _highlightSearchTerms(tweet.s_twt_owner_desc, keywords);
// change from twitter links to readable links
tweet = _fixTweetLinks(tweet);
/** Make numbers readable */
tweet.s_twt_owner_num_following = abbrNum(tweet.s_twt_owner_num_following, 1);
tweet.s_twt_owner_num_follower = abbrNum(tweet.s_twt_owner_num_follower, 1);
tweet.s_twt_owner_num_twt = abbrNum(tweet.s_twt_owner_num_twt, 1);
/** Loop through the properties of tweet object and populate tweetHtml with them */
for (var prop in tweet) {
if (tweet.hasOwnProperty(prop)) {
tweetHtml = _replaceAll(tweetHtml, prop, tweet[prop]);
}
// add comments
tweetHtml = _addComments(tweet, tweetHtml);
/** If both location and url are not present, remove the comma */
if (!(tweet.s_twt_owner_loc && tweet.s_twt_owner_url)) {
$('#url_comma').html('');
}
}
$('#tweets-container').append(tweetHtml);
}
"Sometimes it works just as it's suppose to" this line alone suggests that you run your code prior to DOM creation. sometimes your browser creates the dom fast enough and the handler is being attached to the body, and sometimes your javascript runs first and it isnt being attached. wrap your code in this:
$(function(){
$("body").on("click", ".reply-button", function(){
alert("test");
});
});
Does anyone have any idea on how I should go about debugging this?
Sometimes it's best to pull out a tiny portion of code, and see if it works in isolation. For example: http://jsfiddle.net/6v7z9fak/
js:
$("body").on("click", ".reply-button", function(){
alert("test");
});
html:
<button type="button" class="reply-button">Reply</button>
As you'll see, it works fine. So you can be confident that the error is not in that bit of code alone. It is either another part of the code, or how the parts are interacting together, or something else. Now slowly add more code, test, and see where it breaks.