What I'm working on is simple.
You click on a button (id="themes") and it opens up a div (id="themedrop") that slides down and lists the themes. (I only have two at this point)
<button id="original">Original</button><br />
<button id="grayscale">Grayscale</button>
Now when the site is loaded it loads with style1.css (main/original theme)
<link rel="stylesheet" type="text/css" href="style1.css">
Now what I'm trying to figure out is...
How can I have it that when the grayscale button is clicked to change the stylesheet from style1.css to style2.css (note: files are in the same directory)
Any help would be much appreciated.
$('#grayscale').click(function (){
$('link[href="style1.css"]').attr('href','style2.css');
});
$('#original').click(function (){
$('link[href="style2.css"]').attr('href','style1.css');
});
Give this a try but not sure if it will work I have not tested it but gd luck.
I would suggest you give the link-tag an id such as theme. Put the name of the css file in a data-attribute on the buttons and use the same handler on them both:
Html:
<link id="theme" rel="stylesheet" href="style1.css">
<button id="grayscale" data-theme="style2.css">Gray Theme</button>
And js:
$("button[data-theme]").click(function() {
$("head link#theme").attr("href", $(this).data("theme"));
}
You can try to do that by this way:
<link id="original" rel="stylesheet" type="text/css" href="style1.css">
<script>
function turnGrey(){
//what ever your new css file is called
document.getElementById("original").href="grey.css";
}
</script>
<button id="grey" onclick="turnGrey">Turn Grey</button><br />
Use this :
<link href="Custom.css" rel="stylesheet" />
<link href="Blue.css" rel="stylesheet" />
<link href="Red.css" rel="stylesheet" />
<link href="Yellow.css" rel="stylesheet" />
<select id="changeCss"`enter code here`>
<option onclick="selectCss(this)" value="Blue">Blue</option>
<option onclick="selectCss(this)" value="Red">Red</option>
<option onclick="selectCss(this)" value="Yellow">Yellow</option>
</select>
<script type="text/javacript">
function selectCss() {
var link = $("link[rel=stylesheet]")[0].href;
var css = link.substring(link.lastIndexOf('/') + 1, link.length)
$('link[href="' + css + '"]').attr('href', $('#changeCss').val() + '.css');
}
</script>
I had a dark theme by default on my webpage. To convert it to light theme, I had used the sun icon font by google. So in a simple way, the code to switch between the themes in jquery was:
$('.theme').click(function() {
if ($('.theme').children('img').attr('src') == 'images/lighttheme.png') {
**$('link').attr('href', 'css/styleslight.css');**
$('.theme').children('img').attr('src', 'images/darktheme.png')
} else if ($('.theme').children('img').attr('src') == 'images/darktheme.png') {
**$('link').attr('href', 'css/stylesdark.css');**
$('.theme').children('img').attr('src', 'images/lighttheme.png');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
The first line of the if and else if statement is the full answer. The remaining text involves just changing the icon when clicked from moon to sun, or vice-versa.
Related
EDIT: I can only call tagsinput() if I do not use tagsinput() in a callback
This is still a problem, because I need to call tagsinput() in a callback.
ORIGINAL:
I have not been able to find an answer that solves my issue yet:
I am trying to use this library: https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/
my HTML file includes:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.js"></script>
<!-- Bootstrap CDN links -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="script.js"></script>
<select id="el" data-role="tagsinput" name="el" multiple ></select>
in script.js (which is connected to multiple HTML files, but the one in question is included above):
function addTagToInput() {
$('#el').tagsinput('add', 'item2');
}
After trying to call addTagToInput(), I get $(…).tagsinput is not a function even though the CDN JS file was properly loaded.
The deciding question is still how exactly do you initialize your tagsinput()?
Also I think that you get some other errors like network problems or something else, so that the tagsinput or jQuery library will not load. The following code works correctly and I've created a button whose click event triggers the addTagToInput() function:
$(function() {
var $el = $('#el'),
$btnAddTag = $('#add-tag');
function initInput() {
$el.tagsinput({
// add a custom class which run with bootstrap v4
tagClass: 'badge-dark'
});
}
function addTagToInput() {
$('#el').tagsinput('add', 'item' + Math.floor(Math.random() * 100));
}
initInput();
addTagToInput();
$btnAddTag.on('click', addTagToInput);
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.js"></script>
<button type="button" class="btn btn-dark" id="add-tag">+</button>
<!-- because of adding the initInput() function in jQuery I've deleted the data-role="tagsinput"-->
<select id="el" name="el" multiple ></select>
I have been having so many problems with getting my JQuery to load properly. I have looked at youtube videos and scoured Google but nothing seems to work :(
The most common problem with JQuery not being loaded properly is that people load the js file BEFORE the JQuery, but I have loaded it in the correct order and I am still having problems.
Before, I was able to run my feature that used JQuery only locally, but now even that isn't working.
Here is my index.html file:
<!DOCTYPE html>
<html>
<head>
<title> Website </title>
<link rel = "stylesheet" href="style.css" /> <!-- Link to css -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js"> </script> <!-- link to js AFTER JQuery-->
`
<!-- Import Fonts to Use -->
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Montserrat" />
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Raleway" />
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Muli" />
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto" />
</head>
<body>
<div class="overlay-navigation">
<nav role="navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Works</li>
<li>Resume</li>
<li>Contact</li>
</ul>
</nav>
</div>
<section class="home">
<div class="open-overlay">
<span class="bar-middle"></span>
<span class="bar-bottom"></span>
<span class="bar-top"></span>
</div>
</section>
</body>
</html>
I have a css file named "style.css"
This is my js file titled "script.js"
$('.open-overlay').click(function() {
var overlay_navigation = $('.overlay-navigation'),
nav_item_1 = $('nav li:nth-of-type(1)'),
nav_item_2 = $('nav li:nth-of-type(2)'),
nav_item_3 = $('nav li:nth-of-type(3)'),
nav_item_4 = $('nav li:nth-of-type(4)'),
nav_item_5 = $('nav li:nth-of-type(5)'),
top_bar = $('.bar-top'),
middle_bar = $('.bar-middle'),
bottom_bar = $('.bar-bottom');
overlay_navigation.toggleClass('overlay-active');
if (overlay_navigation.hasClass('overlay-active')) {
top_bar.removeClass('animate-out-top-bar').addClass('animate-top-bar');
middle_bar.removeClass('animate-out-middle-bar').addClass('animate-middle-bar');
bottom_bar.removeClass('animate-out-bottom-bar').addClass('animate-bottom-bar');
overlay_navigation.removeClass('overlay-slide-up').addClass('overlay-slide-down')
nav_item_1.removeClass('slide-in-nav-item-reverse').addClass('slide-in-nav-item');
nav_item_2.removeClass('slide-in-nav-item-delay-1-reverse').addClass('slide-in-nav-item-delay-1');
nav_item_3.removeClass('slide-in-nav-item-delay-2-reverse').addClass('slide-in-nav-item-delay-2');
nav_item_4.removeClass('slide-in-nav-item-delay-3-reverse').addClass('slide-in-nav-item-delay-3');
nav_item_5.removeClass('slide-in-nav-item-delay-4-reverse').addClass('slide-in-nav-item-delay-4');
} else {
top_bar.removeClass('animate-top-bar').addClass('animate-out-top-bar');
middle_bar.removeClass('animate-middle-bar').addClass('animate-out-middle-bar');
bottom_bar.removeClass('animate-bottom-bar').addClass('animate-out-bottom-bar');
overlay_navigation.removeClass('overlay-slide-down').addClass('overlay-slide-up')
nav_item_1.removeClass('slide-in-nav-item').addClass('slide-in-nav-item-reverse');
nav_item_2.removeClass('slide-in-nav-item-delay-1').addClass('slide-in-nav-item-delay-1-reverse');
nav_item_3.removeClass('slide-in-nav-item-delay-2').addClass('slide-in-nav-item-delay-2-reverse');
nav_item_4.removeClass('slide-in-nav-item-delay-3').addClass('slide-in-nav-item-delay-3-reverse');
nav_item_5.removeClass('slide-in-nav-item-delay-4').addClass('slide-in-nav-item-delay-4-reverse');
}
})
ANY help would be appreciated!! Thank you!!
here is what it shows:
Your js files should go at the bottom of the body. You are referencing dom elements in your js that do not exist yet because they have not been loaded in the markup.
Move your jquery and js references to the bottom of the body
I am working on asp.net MVC 5. I have placed a bootstrap toggle switch button having input type checkbox
Bellow is the image of my toggle switch
From my query i am getting a command name cmd_Name in which there is On or Off value in it and based of this value i just want to change the toggle switch from On-Off or from Off-On
Bellow is my razor syntax for toggle
#using (Html.BeginForm())
{
//var cmd_Name = Session["cmd_Name"];
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
<fieldset style="height:60px">
<legend style="text-align:center; font-size:large; font-family:'Times New Roman'; background-color:#C8E6C9; color:red">Remote On/Off</legend>
<input id="test_id" name="cmdName" type="checkbox" checked data-toggle="toggle">
</fieldset>}
Bellow is my script for toggle
<script type="text/javascript">
var search = '#Session["search"]';
var cmd_Name = '#Session["cmd_Name"]';
var data = {}
//alert(cmd_Name);
$(window).on('load', function () {
// here cmd_Name i having On or Off value
// i want to put a check like bellow
if(cmd_Name == "On")
{
// then the toggle switch (checkbox) moves to On
// what should place here that moves the switch from on to off and vise versa
}
else
{
//then toggle switch (checkbox) moves to Off
}
})</script>
Updated Code
Bellow is image for my updated code and error
Updated Code 2
I have following declarations in my headsection in layout
<head>
<title>#ViewBag.Title</title>
#*All the javascript and css files that are required by the
application can be referenced here so that there is no
need to refrence them in each and every view*#
<script type="text/javascript" src="~/Scripts/jquery-3.1.0.min.js"></script>
<script src="~/Scripts/bootstrap-toggle.js"></script>
<link href="~/Content/bootstrap-toggle.css" rel="stylesheet" />
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/DataTables/css/jquery.dataTables.min.css" rel="stylesheet" />
<script type="text/javascript" src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap.min.js"></script>
<script src="http://maps.google.com/maps/api/js?key=MyKey"></script>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="icon" href="favicon.ico" type="image/ico" />
<link rel="shortcut icon" href="~/favicon.ico" /></head>
See bundle.config
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
I have tried many things in if...else like $("#test_id").checked = true/false also i have tried document.getElementById("test_id").checked
But all in vain, any help would be appreciated
Try this -
if(cmd_Name == "On") {
$("#test_id").attr("checked", "checked");
} else if(cmd_Name == "Off") {
$("#test_id").removeAttr("checked");
}
You can do it this way as well
if(cmd_Name == "On") {
$("#test_id").bootstrapToggle("on")
} else if(cmd_Name == "Off") {
$("#test_id").bootstrapToggle("off")
}
Ive got some problem with my jquery function. First of all, this is my HTML head
<link href="css/bootstrap.css" media="screen" rel="stylesheet">
<link href="css/datepicker.css" media="screen" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap-datepicker.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datepicker.js" type= 'text/javascript'></script>
<script src="js/bootstrap-tooltip.js" type= 'text/javascript'></script>
<script src="js/buttons.js"></script>
and here is the code from my button.js file
$(window).load(
function(){
...
$(document).on('click', '.popover a', function(){
alert("asd");
});
$('#button_nowtime').popover({
trigger: 'click',
html: 'true',
title: "<b>Čas</b>",
content:
function() {
var returnstring="",button;
for(var i=0; i<files.length; i++){
button = document.createElement("a");
button.innerText = "someText"
button.href="#";
returnstring+=button.outerHTML;
}
return returnstring;
}
});
}
);
html
<a href="#" id="button_nowtime" class="btn btn-lg btn-danger" data-placement="bottom" data-toggle="popover" title="" >N/A</a>
the problem is, the alert("asd") wont pop up when I click on any button in the tooltip
You should use $.ready instead of window.load, probabily your code doesn't work because window.load occurs before your objects exist. http://www.dotnetbull.com/2013/08/document-ready-vs-window-onload.html
This sample works http://jsfiddle.net/nWKqt/
[ignore this - just including a code block so stackoverflow will let me post the above JSFiddle link. Yeah, seriously.]
Also, you wrote a code that depends on a class that is defined not by you but from a jquery plugin, which you fire after you declared the events.
Try to put the click event after you declared the popover plugin, but better would be to define your cssClass and depend on it.
Why dont use this:
$(".popover a").click( function(){
alert("asd");
});
the old method works fine ..
This is insane... I've been trying to figure out why my popover code won't when hosted locally, but working fine on jsbin. Let me know what you guys think, I going crazy over this. Thanks to you all!!
So here it is:
jsbin: http://jsbin.com/ocepaw/1/edit
/*///// Libraries jquery & bootstrap libraries ///////*/
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
/*///// relevant HTML: Targets (pop1,2,3) & Triggers (Previous & Next buttons) ///////*/
<a href="#" id="pop1" class="btn" data-content="GREAT CONTENT3" data-original-title="Gamification 1/3">
</a>
<a href="#" id="pop2" class="btn" data-content="GREAT CONTENT3" data-original-title="Gamification 3/3">
</a>
<a href="#" id="pop3" class="btn" data-content="GREAT CONTENT3" data-original-title="Gamification 3/3">
</a>
NEXT
PREVIOUS
/*///// CSS ///////*/
var currentPopover = -1;
var popovers = [];
// Initialize all the popovers to be "manually" displayed.
popovers.push($("#pop1").popover({ trigger: 'manual' }));
popovers.push($("#pop2").popover({ trigger: 'manual' }));
popovers.push($("#pop3").popover({ trigger: 'manual' }));
// On each button click, hide the //currently displayed popover
// and show the next one.
$("#NextBtn").click(function() {
if (currentPopover >= 0) {
popovers[currentPopover].popover('hide');
}
currentPopover = currentPopover + 1;
popovers[currentPopover].popover('show');
});
$("#PreviousBtn").click(function() {
popovers[currentPopover].popover('hide');
currentPopover = currentPopover -1;
popovers[currentPopover].popover('show');
});
I had a similar issue a long time ago. Here's how i solved it: i changed the order of my imported .css and .js files. Try to load first bootstrap's required files and then everything else. Hopefully it will work for you too! if not then there's something wrong with your code.
Try declaring the CSS and JS with no redundancies and in correct order:
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js" type="text/javascript"></script>