I want to allow the user to change the 'theme' of the website when he clicks on theme 1 it loads a different CSS file then when the user clicks on theme 2. How is this possible?
This is what I have tierd to do with so far.
<script type="text/javascript">
window.onload = function() {
var fontButton = document.getElementById('changeFont');
fontButton.addEventListener('click', function(){
document.write('<link rel="stylesheet" type="text/css" href="/France2014/css/test.css">');
});
}
</script>
This loads the file when I click on the button, but it removes everything else inside the website and just leaves the HTML tag and CSS file, I know this because I launch the development tool inside of Google chrome.
What can I do? Is there a better way to implement this feature?I am open to suggestions.
Changing a theme is usually done by loading in another class with JQuery.
For example:
HTML:
<body id='skin' class="skin-blue">
JQuery:
$('#skin').addClass('skin-red').removeClass('skin-blue');
To change a font-size easily, consider something like this for example:
var size = 20;
function setFontSize(s) {
size = s;
$('#sidebar-menu').css('font-size', '' + size + 'px');
$('#content').css('font-size', '' + size + 'px');
}
function increaseFontSize() {
setFontSize(size + 5);
}
function decreaseFontSize() {
if(size > 5)
setFontSize(size - 5);
}
$('#inc').click(increaseFontSize);
$('#dec').click(decreaseFontSize);
setFontSize(size);
and for example a + and - button
<li class="dropdown tasks-menu">
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-fw fa-plus" id="inc"></i>
</a>
</li>
</li>
<li class="dropdown tasks-menu">
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-fw fa-minus" id="dec"></i>
</a>
</li>
</li>
i suggest you to add id or class onclick to <body> tag, You will have two sets of styles:
.menu{
color:black}
and after click you will add <body id="greenTheme">
#greenTheme .menu{
color:green}
i think you should have to change just the href value of stylesheet on every button click .Doing that ,will load the new CSS file without affecting the DOM elements . Hope I am clear to you .
Thanks !!
I would try the following link as a quick working example...
enter link description here
You can see it in action here...
enter link description here
Even though your attempted solution is pure JavaScript and you might not actually need it I feel the need to mention jQuery.
It should help you write less code that should be cross browser friendly too, it actually makes writing JavaScript less painful
You can put a div before the link tag and use getElementById.innerHTML and change the contents to your desired css
Related
I have an if/else statement for our navigation where when a user clicks on the link associated with the dropdown-toggle class a submenu pops up.
We have multiple links on our navigation with the dropdown-toggle class. I only need to target 1 not all of them that's why I'm using .eq(0).
When the submenu appears a new class called open gets injected to the parent <li>.
For some reason I can't get this if/else statement to fully work. I have the first half working but not the second.
For the else portion I'm trying to add what would happen if the open class got injected and the active-nav-tab class gets added.
active-nav-tab is the class used for the state when users are on the current page. active-nav-tab is supposed to disappear when a user clicks on dropdown-toggle of the current page only and when they click outside the window of the submenu. Then when a user clicks on a navigation link with dropdown-toggle, the active-nav-tab again is supposed to appear on the current page. Hopefully that makes sense. I've been at this for like two days.
Code Below:
$('.dropdown-toggle').click(function (e) {
if ($(this).not('open')) {
$('.dropdown-toggle').eq(0).removeClass('active-nav-tab');
alert('test1');
}
else {
$('.dropdown-toggle').eq(0).addClass('active-nav-tab');
alert('test2');
}
});
HTML
<li>
<a class="link dropdown-toggle active-nav-tab" role="button">
<span class="tab-icon icon-header-language"></span>
<span class="tab-text">Region</span>
</a>
</li>
<li class="open">
<a class="link dropdown-toggle" role="button">
<span class="tab-icon icon-header-language"></span>
<span class="tab-text">Region</span>
</a>
</li>
<li>
<a class="link dropdown-toggle" role="button">
<span class="tab-icon icon-header-language"></span>
<span class="tab-text">Region</span>
</a>
</li>
I don't know what I'm exactly missing. Any help is gladly appreciated.
Thanks!
The quickest change you can make to your code to get the behavior you want is to replace
if ($(this).not('open')) {
With
if ($('.dropdown-toggle').eq(0).hasClass('active-nav-tab')) {
But without knowing your use case or how many "dropdown-toggle" elements you have it's hard to say if this would be a complete solution or not.
This seems to have solved my issue more or less. I'll see what QA says lol
Thank you!
$('.active-nav-tab').click(function (e) {
if ($(this).parents().hasClass("open")) {
$(this).addClass('active-nav-tab');
alert('activated');
}
else {
$(this).removeClass('active-nav-tab');
alert('deactivated');
}
});
this will process clicking on the first element with "dropdown-toggle" class
$('.dropdown-toggle:first').click(function () {
$(this).toggleClass("active-nav-tab");
if ($(this).hasClass("active-nav-tab")) {
alert ("Tab activated");
} else {
alert ("Tab deactivated");
}
}
also jQuery function not(selector) should be used on enumeration of objects to filter it.
So, I have got a couple of html files that share exactly some lines of the code. I have that code with an include and I call that in every single page. It's basically a menu or better saying, a Bootstrap list-group. Here is the code:
<div class="list-group">
<i class="glyphicon glyphicon-send"></i> Page1
<i class="glyphicon glyphicon-cog"></i> Page2
<i class="glyphicon glyphicon-question-sign"></i> Page3
<i class="glyphicon glyphicon-picture"></i> Page4
</div>
The problem with this is that, I need my active class to change depending on which page I'm visiting. Therefore, we can say that the menu is only 99% the same, I mean, that class needs to be changed.
What's the best approach, recommendation or solution to tackle this?
You can, on document ready, check the URL and then apply the active class to the element you need.
$( document ).ready(function() {
var url = window.location.href;
if (url.IndexOf('page1') > -1) {
$(".list-group:first-child").addClass("active");
}
// ... other cases, using switch for each
});
Something like that
You can done through jquery
$(".list-group-item").on("click",function(){
$(".list-group-item.active").removeClass('active');
$(this).addClass('active');
});
I have this anchor which has an onclick function that changes the background color of certain div to green. It is properly working but the problem is it needs to be double clicked in order for the function to be executed.
HTML:
<a onclick="btngreen()" href="">MENU</a>
Javascript:
function btngreen(){
document.getElementById("nameofdiv").style.backgroundColor = 'green';
}
You could use ondblclick
<a ondblclick="btngreen()" href="">MENU</a>
As per my understanding of your problem.
Try this code. use # in href
<a onclick="btngreen()" href="#">MENU</a>
or you can use
<a onclick="btngreen()" href="javascript: void(0)">MENU</a>
Works fine for me. Only issue I had was your empty href="" tag so I removed it. You could also use href="#" if you do not want to remove it.
<script>
function btngreen(){
document.getElementById("nameofdiv").style.backgroundColor = "green";
}
</script>
<a onclick="btngreen()" href="#">MENU</a>
<div id="nameofdiv" style="width:100px;height:100px;"></div>
If you do not need the button to be a link, you could simple change it to another tag such as <p> since the a will be trying to naviagte the page.
<p onclick="btngreen()">menu</p>
<script type="text/javascript">
function btngreen(){
document.getElementById("nameofdiv").style.backgroundColor = "green";
}
</script>
or you could also just default the link to not navigate from the page such as this example below.
<a onclick="btngreen()" href="#">menu</a>
<script type="text/javascript">
function btngreen(){
document.getElementById("nameofdiv").style.backgroundColor = "green";
}
</script>
Using the href="#" is a dead link and will not navigate the page anywhere.
I'm wanting to swap the second class of Bootstraps 'glyphicon' span, but instead of toggling the class, It's adding it behind, thus not changing the class at all.
I'm new(ish) to jQuery / Javascript and I just can't get my head around this.
Heres the
<nav class="navbar navbar-top" style="position:fixed; width:100%;">
<a class="navbar-brand" href="#">Project name</a>
<a class="navbar-brand" href="#" style="float:right;">
<span class="glyphicon glyphicon-tasks" id="whiter"></span>
</a>
And the script is below:
$('.glyphicon').click(function(){
$(this).toggleClass('glyphicon-chevron-up');
I get all the classes instead of just glyphicon-chevron-up, Im getting:
<span class="glyphicon glyphicon-tasks glyphicon-chevron-up"></span>
Removing the glyphicon-tasks class on Element inspect displays the Chevron, so some how it is being blocked and the tasks glyph isnt being swapped.
I think you want to swap glyphicon-tasks and glyphicon-chevron-up. You need to toggle both class like following.
$(this).toggleClass('glyphicon-tasks glyphicon-chevron-up');
This is because your function is set to class, which mean all elements with the given class.
To focus a specific element, provide, for example, an unique ID.
Here, you already got one.
$('#whiter').click(function() {
$(this).toggleClass('glyphicon-chevron-up');
});
I guess this can help
$('.glyphicon').click(function(){
$(this).removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-up');
}
If you want to have a bit more control, use jQuery to its fullest, apply a data variable to multiple glyphicons (chances are that you'll be checkboxes, folder icons, tree icons):
<nav class="navbar navbar-top" style="position:fixed; width:100%;">
<a class="navbar-brand" href="#">Project name</a>
<a class="navbar-brand" href="#" style="float:right;">
<span><i class="glyphicon glyphicon-tasks" data-tasks="firstCollection" data-mycolor="white" data-icontype="taskIcon"></i></span>
</a>
...plus, elsewhere in your page, another glyphicon, for example (this will not be used, affect or be affected by our code):
<i class="glyphicon glyphicon-unchecked" id="checkbox_Analytics" data-foldername="group_Analytics" data-icontype="groupCheckbox"></i>
...while, on the other hand, this will be affected by our code (because of foldername match):
<i class="glyphicon glyphicon-check" data-foldername="2014" data-icontype="childCheckbox"></i>
...and in JS, toggle their values without affecting each and every other glyphicon:
$('i[data-icontype="taskIcon"]').on('click', function() {
$('i[data-tasks="firstCollection"]').toggleClass('glyphicon-tasks glyphicon-chevron-up');
console.log("current state now displays CHEVRON UP (true/false)? ["+$(this).hasClass('glyphicon-chevron-up')+"]");
});
...
$('i[data-icontype="childCheckbox"]').on('click', function() {
$('i[data-foldername="2014"]').toggleClass('glyphicon-check glyphicon-unchecked');
// Notice that you can also access the `data-foldername` variable directly for each element which has it
var layerFolderName = $(this).closest('i').data('foldername');
console.log("Changed glyphicon chevron in: "+layerFolderName);
});
NOTE1: one style of using glyphicons, places them inside <i> tags and references them directly thusly.
NOTE2: "white" is not, in general, a good idea for an id. I recommend another data variable, data-mycolor, which might in turn be germane to your code's logic. In this example, it is set, but not really used.
I am using to do this function to rotate html contents. It is working on laptop/mac but not working when I 'touch' the links on mobile phone.
<a href="javascript:void(0)" >Link 1</a>
<a href="javascript:void(0)" >Link 2</a>
<a href="javascript:void(0)" >Link 3</a>
<a href="javascript:void(0)" >Link 4</a>
<a href="javascript:void(0)" >Link 5</a>
Upon clicking, the html contents will be dynamically changed.
I tried
<a href="#" onclick="javascript:;" >Link 1</a>
Also tried
Link 1
Both didnt work on mobile. Any idea why is this so? Do I need to add any codes in the javascript?
Edit:
The triggering code is this. Firstly it is using a class. Below is one of the methods.
bindMoveHandler:function(target){
var _this = this;
target.on(_this.options.trigger,'a',function(event){
var w = $(this).width();
var current_offset = $(this).offset();
var control_offset = target.offset();
var left = current_offset.left - control_offset.left;
var scale = w/100;
var d = 0; //index after move finished
Full code: http://www.jqueryscript.net/demo/jQuery-Plugin-For-Stylish-Tabbed-Slider-Kiwi-Slider/javascripts/kiwi-slider.js
How do I modify this to suit the suggested solutions?
Use jQuery instead of the onclick attribute and use a function call something like this:
html:
Home
jQuery (Tested):
$('#onceClicked').click(function(e) {
$(this).text('You clicked me!');
});
An example page would be like this:
<!DOCTYPE html>
<html>
<head>
<title>Change Text</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
Link 1
Link 2
Link 3
Link 4
Link 5
<script>
$('.onceClicked').click(function(e) {
$(this).text('You clicked me!');
});
</script>
</body>
</html>
Here is a working example:
http://jsfiddle.net/q87dLoc1/
Although if you wish to add html and not just text you would change this:
$(this).text('You clicked me!');
to something like this:
$(this).html('<b>You clicked me!</b>');
Have you tried this:
Link 1
Do keep in my mind that this method may bite a possible return value of yourFunction().