I'am using jQuery theme switcher (with local storage). I have got 4 buttons. Onclick of each button, the respective theme loads.
But I have a problem here. Each time page loads, the default theme loads first and switches to the theme stored in local storage. How do I load the alternate stylesheet fast without default theme being shown?
"<link id="styleswitch" href="#" rel="stylesheet" /> "
<ul class="nav collapse" style="">
<li>
<a href="javascript:void(0);" data-toggle="load-css" data-uri="../../Styles/theme1.css" class="no-submenu">
<div class="label pull-right" style="background-color:#2980b9"><i class="fa fa-paint-brush"></i></div>
<span class="item-text"> Dodger Blue</span>
</a>
</li>
<li>
<a href="javascript:void(0);" data-toggle="load-css" data-uri="../../Styles/theme2.css" class="no-submenu">
<div class="label pull-right" style="background-color:#85668B"><i class="fa fa-paint-brush"></i></div>
<span class="item-text"> Medium Purple</span>
</a>
</li>
<li>
<a href="javascript:void(0);" data-toggle="load-css" data-uri="../../Styles/theme3.css" class="no-submenu">
<div class="label pull-right" style="background-color:#7EA53C"><i class="fa fa-paint-brush"></i></div>
<span class="item-text"> Olive Green</span>
</a>
</li>
<li>
<a href="javascript:void(0);" data-toggle="load-css" data-uri="../../Styles/theme4.css" class="no-submenu">
<div class="label pull-right" style="background-color:#6D90C5"><i class="fa fa-paint-brush"></i></div>
<span class="item-text"> Cornflower Blue</span>
</a>
</li>
<li>
<a href="javascript:void(0);" data-toggle="load-css" data-uri="../../Styles/theme5.css" class="no-submenu">
<div class="label pull-right" style="background-color:#1E5237"><i class="fa fa-paint-brush"></i></div>
<span class="item-text"> Default theme</span> <!--this is the default theme -->
</a>
</li>
</ul>
This is a common 'flickering' issue, you also see with frameworks like AngularJS.
The solution is rather simple. You can hide the contents, until the initialization is done.
CSS
body {
display: none;
}
body.initialized {
display: block;
}
JS
// Initialization like loading the stylesheet, then
document.body.classList.add('initialized');
Hello You can add style sheet using Append or prepend methord of jQuery and you can add this using Delay() of JQuery so that, you can add this according to your timeline requirement
$(document).ready(function(){
setTimeout(function(){
$("head").append("<link href='css/sarbasishstyle.css' rel='stylesheet' type='text/css'/>");
}, 3000);
});
<html>
<head>
<title> Header is here </title>
</head>
<body>
Hello
</body>
</html>
Hope this may help you, Because i have tried it and its working
You can remove css like that which is not required. You can do it by using ID attribute. Give Id to each stylesheet and check if it is exist in the html or not then remove which are not require and add the which is essential .
Thanks . if you have any doubt then let me know
Related
I have the bellow code:
<div id="twoBtn" class="mainContainer"><!--two buttons-->
<p>Find us on the app store, or send us an email bellow!</p>
<!--<a href="#" id="btn1" class="button1">
<img src="Resources/images/apple.png">
<span>App Store</span>
</a>-->
<a href="#" id="btn2" class="button2">
<!--<img src="Resources/images/android.png">-->
<span>Contact us</span>
</a>
I would like the app store to be a link the user can click on. How can I do this?
The solution to your question would be
<div id="twoBtn" class="mainContainer"><!--two buttons-->
<p>
Find us on the
<a href="#your_link" >
app store
</a>
, or send us an email bellow!
</p>
<a href="#" id="btn2" class="button2">
<!--<img src="Resources/images/android.png">-->
<span>Contact us</span>
</a>
It will make your "app store" a link and you can ssign classes and IDs to this a tag.
I am having troubles with a a navigation (structured with tabs) that is not working on this page. but works properly instead on this page using exactly the same way to include it.
On click on "Norway" on top left the navigation opens but is not possible to switch on the tabs "Americas, South Africa" etc.)
This is the phpi'm using to include it:
<div class="outlet__box">
<div class="outlet__box_content">
<?php include '../../menu.php'; ?>
</div>
</div>
The htmlof the navigation is this instead:
<ul class="tabs">
<li class="active">
<span class="h2 tabs__headline trigger-select-tab">Europe
<span class="caret visible-xs"></span>
</span>
</li>
<li>
<span class="h2 tabs__headline trigger-select-tab">Americas
<span class="caret visible-xs"></span>
</span>
</li>
<li>
<span class="h2 tabs__headline trigger-select-tab">Middle East and Africa
<span class="caret visible-xs"></span>
</span>
</li>
<li>
<span class="h2 tabs__headline trigger-select-tab">Asia and Oceanic
<span class="caret visible-xs"></span>
</span>
</li>
</ul>
Is the problem related to js? (I checked the console and i see no errors).
Any tips?
Thanks in advance
Put this code for your navigation, and you're all set...
$('#language-outlet-wrapper .outlet .tabs>li').click(function(index){
var ind = $('#language-outlet-wrapper .outlet .tabs>li').index(this);
$(this).addClass('active').siblings().removeClass('active');
$(this).parent().parent().find('ul.tab_content>li').each(function(index){
if(ind == index){
$(this).addClass('active').siblings().removeClass('active');
}
});
});
Writing an angular app in bulma, copied the template directly from the template site for testing and I get this error. I have checked and checked and everything is closed properly, yet somehow I keep getting an unclosed nav error. Oddly enough when I delete the closing nav tag, the site compiles correctly, but is broken. I have no idea what to do.
Code
<section class="hero is-info is-fullheight">
<div class="hero-head">
<nav class="navbar">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item" href="../">
<img src="http://bulma.io/images/bulma-type-white.png" alt="Logo">
</a>
<span class="navbar-burger burger" data-target="navbarMenu">
<span></span>
<span></span>
<span></span>
</span>
</div>
<div id="navbarMenu" class="navbar-menu">
<div class="navbar-end">
<span class="navbar-item">
<a class="button is-white is-outlined" href="#">
<span class="icon">
<i class="fa fa-home"></i>
</span>
<span>Home</span>
</a>
</span>
<span class="navbar-item">
<a class="button is-white is-outlined" href="#">
<span class="icon">
<i class="fa fa-superpowers"></i>
</span>
<span>Examples</span>
</a>
</span>
<span class="navbar-item">
<a class="button is-white is-outlined" href="#">
<span class="icon">
<i class="fa fa-book"></i>
</span>
<span>Documentation</span>
</a>
</span>
<span class="navbar-item">
<a class="button is-white is-outlined" href="https://github.com/dansup/bulma-templates/blob/master/templates/landing.html">
<span class="icon">
<i class="fa fa-github"></i>
</span>
<span>View Source</span>
</a>
</span>
</div>
</div>
</nav>
</div>
<div class="hero-body">
<div class="container has-text-centered">
<div class="column is-6 is-offset-3">
<h1 class="title">
Coming Soon
</h1>
<h2 class="subtitle">
$this is the best software platform for running an internet business. We handle billions of dollars every year for forward-thinking businesses around the world.
</h2>
<div class="box">
<div class="field is-grouped">
<p class="control is-expanded">
<input class="input" type="text" placeholder="Enter your email">
</p>
<p class="control">
<a class="button is-info">
Notify Me
</a>
</p>
</div>
</div>
</div>
</div>
</div>
Error
`compiler.js:486 Uncaught Error: Template parse errors:
Unexpected closing tag "nav". It may happen when the tag has already
been closed by another tag. For more info see
https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-
implied-end-tags ("
</div>
</div>
[ERROR ->]</nav>
</div>`
in my case I was forgetting a detail in the tag
<button class="btn btn-primary" (click) "handleClickMe()
">Click me !</button>
I forgot to put the "=" in (click)="handleClickMe()
Usually if you see an "Unexpected closing tag <something>" the problem isn't actually with that <something> but rather with an adjacent element that hasn't been properly closed. Paste stuff here: https://validator.w3.org or any similar HTML validator service, or use a better editor/IDE that offers syntax highlighting to help you find these errors.
You are missing a closing </div> tag.
You close navbar-brand, navbar-menu and navbar-end but you do not close <div class='container'>
As this missing </div> tag ought to be directly before </nav>, you get the error telling you, in fact, exactly where you ought to look. "I found a </nav> I wasn't expecting to see!" ... Ok, so go look at wherever you have a </nav> and figure out what element nearby is missing or has typos, etc.
Adding for future reference, for Angular
I've also seen this where you have invalid html like this
<p>
<div>
</div>
</p>
Change the p to a div and it'll work
I have created a global Jquery to add and remove class toggle function for various elements through my page. JsFiddle
The toggle class displays a hidden div which overlays the original div. Within the overlay i have created a close button is an attempt to remove the hidden div.
I am having slight issue in removing a the toggle class with the close button. Below is my code
$('.details-btn').click(function(){
var $panel = $(this).closest('.square').find('.i-panel');
if ($panel.hasClass('inactive')) {
$('.square .i-panel').addClass('inactive');
$panel.removeClass('inactive');
} else {
$panel.addClass('inactive');
}
});
HTML
<div class="item-container small-6 relative">
<div class="square">
<span class="exclusive-tag-3 cap-txt absolute">
<p class="absolute">New</p>
</span>
<img src="http://myjpg">
<div class="item-details">
<ul>
<li class="small-5">
<p>ICON</p>
</li>
<!-- INFO BTN -->
<li class="small-5 details-btn">
<i class="fa fa-info-circle">OPEN</i>
</li>
<!-- INFO BTN ENDS -->
</ul>
</div>
<div class="d-hidden i-panel inactive absolute">
<article class="global-padding">
</article>
<footer class="absolute">
<ul class="global-padding">
<li class="small-5">
<a>
<p class="heading-5">Details</p>
</a>
</li>
<li class="small-3">
<a>
<p class="heading-5">
<i class="fa fa-envelope-o">SEND</i>
</p>
</a>
</li>
<li class="small-3">
<a>
<p class="heading-5">
<i class="fa fa-times">close</i>
</p>
</a>
</li>
</ul>
</footer>
</div>
</div> <!-- SQUARE ENDS HERE -->
</div> <!-- ITEM-CONTAINER ELEMENTS ENDS -->
You don't have a click handler for the close button, so only the open button is triggering the class toggle, you need to add the class details-btn to the close button as well or create a new click handler.
Try replacing
<p class="heading-5">
<i class="fa fa-times">close</i>
</p>
with
<p class="heading-5 details-btn">
<i class="fa fa-times">close</i>
</p>
Your Jquery function is triggered when you click on an element that has the class details-btn on it, therefore you must add class details-btn to your close button like this:
<i class="fa fa-times details-btn">close</i>
i am implementing the bsn autosuggest
can any one tellme how can i add an div in the result the result will be formed like this
<div style="left: 347px; top: 1024px; width: 400px;" class="autosuggest" id="as_testinput_xml">
<div class="as_header">
<div class="as_corner"></div>
<div class="as_bar"></div>
</div>
<ul id="as_ul">
<li>
<a name="1" href="#">
<span class="tl"> </span>
<span class="tr"> </span>
<span><em>W</em>aldron, Ashley<br><small>Leicestershire</small></span>
</a>
</li>
<li>
<a name="2" href="#">
<span class="tl"> </span>
<span class="tr"> </span>
<span><em>W</em>heeler, Bysshe<br><small>Lincolnshire</small></span>
</a>
</li>
</ul>
<div class="as_footer">
<div class="as_corner"></div>
<div class="as_bar"></div>
</div>
</div>
i need to add an diva above the ul as the Category like
<div>Category</div>
i tried
var tmp = _bsn.DOM.createElement("div", {className:"tmp"});
and i need to know how to add values to the div using java script .....
This autocomplete system hasn't been updated since 2007. I think it'd be wise for you to try something that's more up to date. Do you use jQuery? This is what I'd recommend: http://docs.jquery.com/Plugins/autocomplete, it handles all the work for you.
An advantage with using jQuery is that you can utilize Google's CDN: http://css-tricks.com/google-cdn-naming/
There's a very high chance your visitor won't have to download jQuery cause it's already been used on another site.