I'm applying a CSS class using .addClass when a tab is selected and it is also adding the class to the parents parent tab. The class is being added but the CSS doesn't seem to be taking effect of the parents parent class (apologies if that sounds awkward).
CSS:
.selectedTab{
color:#234 !important;
background-color:white !important;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Visit Northern Ireland</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="js/common.js"></script>
<script src="js/jquery.tools.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/accordion.css">
<link rel="stylesheet" type="text/css" href="css/armagh.css">
<link rel="stylesheet" type="text/css" href="css/common.css">
</head>
<body>
<div id="centeredPane">
<nav>
<ul id="css-tabs">
<li>Home</li>
<li>Activities
<div class="subnav" id="activitiesLink">
Co. Armagh
Co. Antrim
Co. Down
Co. Fermanagh
Co. Londonderry
Co. Tyrone
</div>
</li>
<li>Restaurants
<div class="subnav" id="restaurantLink">
Indian
Tapas
American
Italian
</div>
</li>
<li>Game</li>
</ul>
</nav>
<div class="content" id="home">home</div>
<div class="content" id="armagh">armagh</div>
<div class="content" id="antrim">antrim</div>
<div class="content" id="down">down</div>
<div class="content" id="fermanagh">fermanagh</div>
<div class="content" id="londonderry">londonderry</div>
<div class="content" id="tryone">tyrone</div>
<div class="content" id="indian">indian</div>
<div class="content" id="tapas">tapas</div>
<div class="content" id="american">american</div>
<div class="content" id="italian">italian</div>
<div class="content" id="game">game</div>
<footer>For more information visit Discover Northern Ireland</footer>
</div>
</body>
</html>
jQuery:
$('.contentLinks').click(function() {
$(this).addClass("selectedTab");
$('a').not(this).removeClass("selectedTab");
//var is_element_li = $(this).parent().parent().get(0).tagName.is("li");
var is_element_li = $(this).parent().parent().is("li");
if(is_element_li){
$(this).parent().parent().addClass("selectedTab");
}
var nameAttribute = $(this).attr('name');
nameAttribute = "#"+ nameAttribute;
$(nameAttribute).show();
$('div.content').not(nameAttribute).hide();
});
How can I get the style to apply?
You need to add the selectedTab class to your anchor element, instead of the the li element:
$(this).parent().parent().children("a").addClass("selectedTab");
Related
I'm doing a project. At a certain point i want to have two buttons, one for changing to a lighter theme and another to change to a darker theme and apply the changes to the whole website and not just the page in question
This is the page where i have the functionality:
ConfLayout.cshtml:
<!DOCTYPE HTML>
<html>
<head>
<title>TekSell</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="~/Content/styles.css" rel="stylesheet" />
<link href="~/Content/styles-admin.css" rel="stylesheet" />
</head>
<body id="top">
<section id="banner">
<div class="inner">
Learn More
</div>
</section>
<!-- Main1 -->
<div id="main">
<p style="text-align:center">Serviços</p>
<div class="inner">
<!-- Services -->
<div class="thumbnails">
<div class="box">
<img src="~/Content/Images/gallery.jpg" />
<div class="inner">
<h7>Galeria</h7>
</div>
</div>
<div class="box">
<img src="~/Content/Images/location.jpg" />
<div class="inner">
<h7>Localização</h7>
</div>
</div>
</div>
</div>
</div>
<!-- Main2 -->
<div class="page">
<div class="container">
<div class="row">
<div class="col-md-4">
<h3 class="section-title">Sobre Nós</h3>
<figure><img src="~/Content/Images/logo.jpg" /></figure>
<h4>Acerca de nós</h4>
<p>Somos uma empresa fictícia de venda de software informático</p>
</div>
<div class="col-md-4">
<h3 class="section-title">Âmbito</h3>
<h4>Projeto desenvolvido no âmbito da unidade curricular de Laboratório de Desenvolvimento de Software</h4>
</div>
<div class="col-md-4">
<h3 class="section-title">Configurar página</h3>
<h4>Administrador, altere aqui o layout da página</h4>
<div class="dropdown">
<button class="dropbtn">Layout Configuration</button>
<div class="dropdown-content">
Change to lighter theme
Change to darker theme
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer id="footer">
<div class="inner">
<h7>TekSell</h7>
<p>Email: teksell#lds.pt</p>
</div>
</footer>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/jquery.poptrox.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
<script src="~/Scripts/changeLayout.js"></script>
</body>
</html>
As you can see i've two css files created. The 'styles.css' is the lighter theme, and 'styles-admin.css' is the darker theme. The functionality is implemented at "div class="dropdown-content"
What happens is, as i have both css files linked, when i run it, by default, the view assumes the darker theme(styles-admin.css).
This is the javascript file i use to try the changes:
function changeCSS(cssFile, cssLinkIndex) {
var oldlink = document.getElementsByTagName("link").item(cssLinkIndex);
var newlink = document.createElement("link");
newlink.setAttribute("rel", "stylesheet");
newlink.setAttribute("href", cssFile);
document.getElementsByTagName("head").item(cssLinkIndex).replaceChild(newlink, oldlink);
}
What is missing? Am i doing it the wrong way?
If you include two CSS files with the same selectors inside, the second file will always override the first.
Just use one <link> and change its href.
Also, why load jQuery and not use it?
<link href="~/Content/styles.css" rel="stylesheet" />
$("link").attr("href","~/Content/styles-admin.css");
Job done!
Use similar way. Preset the theme colours and change the root attribute like this
const colors =['#317EEB', '#6427BA'];
let index = 0;
function changeBackground(){
index = (index+1)%2;
document.documentElement.style.setProperty('--main-color', colors[index]);
}
:root {
--main-color: #317EEB;
}
.set-background{
background: var(--main-color);
width: 10em;
height: 10em;
}
button{
margin-top: 5px;
}
<div class="set-background">
</div>
<button onClick="changeBackground()">Change color</button>
ng-controller doesn't work for kendo tabstrip tab content. Please check my code below.
<!--tabstripCtrl.js-->
angular.module('tabstripApp',[]);
var app = angular.module('tabstripApp');
app.controller('tabCtrl',['$scope',function($scope){
$('#tabstrip').kendoTabStrip({
contentUrls:[
'views/gridview1.html',
'views/gridview2.html',
'views/gridview3.html',
]
});
}]);
<!--grid1Ctrl.js-->
var app = angular.module('tabstripApp');
app.controller('grid1Ctrl',['$scope',function($scope){
$scope.grid1 = "grid1";
}]);
<!--index.html-->
<html>
<head>
<link rel="stylesheet" href="css/kendo.common.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/kendo.all.min.js"></script>
<script src="controllers/tabstripCtrl.js"></script>
<script src="controllers/gridCtrl.js"></script>
</head>
<body ng-app="tabstripApp" ng-controller='tabCtrl'>
<div id='tabstrip'>
<ul>
<li class="k-state-active">grid1</li>
<li>grid2</li>
<li>grid3</li>
</ul>
<div ng-controller="grid1Ctrl"></div>
<div ng-controller="grid2Ctrl"></div>
<div ng-controller="grid3Ctrl"></div>
</div>
</body>
</html>
<!--gridview1.html-->
<div>
<span>{{grid1}}</span>
</div>
Since each tab content is very complex, so I create separate html file to maintan them. But, the grid1Ctrl, grid2Ctrl and grid3Ctrl binding don't work, any ideas?
<div ng-controller="myController">
<div id="tabstrip" kendo-tab-strip="tabstrip">
<ul>
<li class="k-state-active">grid1</li>
<li>grid2</li>
<li>grid3</li>
</ul>
<div ng-controller="grid1Ctrl">
{{grid1}}
</div>
<div ng-controller="grid2Ctrl">
{{grid2}}
</div>
</div>
</div>
DEMO
I've just started with a simple jQuery Mobile app in Intel XDK. There are only two pages (views) and a button to show the second page from the main one.
Below is the code untouched (as produced by the visual designer).
<!DOCTYPE html>
<!--HTML5 doctype-->
<html>
<head>
<link rel="stylesheet" type="text/css" href="jqm/jquery.mobile-min.css">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/index_main.less.css" class="main-less">
<title>Your New Application</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<style type="text/css">
/* Prevent copy paste for all elements except text fields */
* { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
input, textarea { -webkit-user-select:text; }
</style>
<script src="intelxdk.js"></script>
<script type="text/javascript">
/* This code is used to run as soon as Intel activates */
var onDeviceReady=function(){
//hide splash screen
intel.xdk.device.hideSplashScreen();
};
document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);
</script>
<script type="application/javascript" src="js/jquery.min.js"></script>
<script type="application/javascript" src="jqm/jquery.mobile-min.js" data-ver="0"></script>
<script type="application/javascript" src="js/index_user_scripts.js"></script>
</head>
<body>
<!-- content goes here-->
<div class="uwrap">
<div class="upage" id="mainpage" data-role="page">
<div class="upage-outer">
<div class="upage-content" id="mainsub">
<div class="grid grid-pad urow uib_row_1 row-height-1" data-uib="layout/row" data-ver="0">
<div class="col uib_col_1 col-0_12-12" data-uib="layout/col" data-ver="0">
<div class="widget-container content-area vertical-col">
<div class="widget uib_w_1 d-margins" data-uib="media/text" data-ver="0" id="page1-line1">
<div class="widget-container left-receptacle"></div>
<div class="widget-container right-receptacle"></div>
<div>
<p>Text in page-1</p>
</div>
</div><a class="widget uib_w_3 d-margins" data-uib="jquery_mobile/button" data-ver="0" data-role="button" id="gotoP2">goto Page2</a><span class="uib_shim"></span>
</div>
</div>
<span class="uib_shim"></span>
</div>
</div>
<!-- /upage-content -->
</div>
<!-- /upage-outer -->
</div>
<div class="upage" id="secondPage" data-role="page">
<div class="upage-outer">
<div id="secondPagesub" class="upage-content ">
<div class="grid grid-pad urow uib_row_2 row-height-2" data-uib="layout/row" data-ver="0">
<div class="col uib_col_2 col-0_12-12" data-uib="layout/col" data-ver="0">
<div class="widget-container content-area vertical-col">
<div class="widget uib_w_2 d-margins" data-uib="media/text" data-ver="0" id="page2-line1">
<div class="widget-container left-receptacle"></div>
<div class="widget-container right-receptacle"></div>
<div>
<p>Text in page 2</p>
</div>
</div><span class="uib_shim"></span>
</div>
</div>
<span class="uib_shim"></span>
</div>
</div>
</div>
<!-- /upage-outer -->
</div>
<!-- /upage -->
</div>
<!-- /uwrap -->
</body>
And the index_user_scfripts.js file:
(function() {
"use strict";
function register_event_handlers() {
$("#gotoP2").click(function(evt) {
$("body").pagecontainer("change", "secondPage", { reverse: false});
});
}
$(document).ready(register_event_handlers);
})();
When I hit the button in the first page, the debugger throw a JavaScript error in jquery.min.js file:
Uncaught Error: cannot call methods of pagecontainer prior to initialization; attempted to call method "change"
Any sugestion are wellcome.
The problem was in the method to call the page change. Instead the original, the index_user_scripts.js must be:
(function() {
"use strict";
function register_event_handlers() {
$("#gotoP2").click(function(evt) {
$(":mobile-pagecontainer").pagecontainer("change", "#secondPage", { reverse: false});
});
}
$(document).ready(register_event_handlers);
})();
When the fade in button is clicked it moves to the right but it doesn't fade in at the same time. I tried a method chain of .fadeIn() .animate() but all that did was fade in the div first then animated it to the right. I'm looking for one smooth transition. I was able to achieve this in the code school tutorial for animating a div, but not in my own.
here is my code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="css/style.css" media="screen" rel="stylesheet" type="text/css"
<title>DGI Supply - Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<button class="btn1">Fade In</button>
<div id="fixedNavContainer" style="background:#487abe; width: 300px; position:relative;">
<ul>
<li>The DGI Supply Difference</li>
<li>Productivity</li>
<li>Vendors</li>
<li>Automated Procurement Solutions</li>
<li>Shop Our Products</li>
</ul>
</div>
<div id="theDGISupplyDifference" class="mainContainer">
<h1>The DGI Supply Difference</h1>
<p>what is the DGI Supply Difference?</p>
<div id="experienceCounts" class="subContainer">
<h1>Experience Counts</h1>
<p>This is why experience counts...</p>
</div>
<div id="sizeMatters" class="subContainer">
<h1>Size Matters</h1>
<p>This is why size matters...</p>
</div>
<div id="showMeTheMoney" class="subContainer">
<h1>Show me the Money</h1>
<p>This is how we show you the money...</p>
</div>
<div id="ourApproach" class="subContainer">
<h1>Our Approach</h1>
<p>This is our approach..</p>
<div id="approach1" class="sub-subContainer">
<h1>Approach 1</h1>
<p>this is our first approach</p>
</div>
<div id="approach2" class="sub-subContainer">
<h1>Approach 2</h1>
<p>this is our second approach</p>
</div>
<div id="approach3" class="sub-subContainer">
<h1>Approach 3</h1>
<p>this is our third approach</p>
</div>
<div id="approach4" class="sub-subContainer">
<h1>Approach 4</h1>
<p>this is our fourth approach</p>
</div>
</div>
</div>
<div id="productivity" class="mainContainer">
<h1>Productivity</h1>
<p>How do we help you increase productivity?</p>
</div>
<div id="vendors" class="mainContainer">
<h1>The DGI Supply Difference</h1>
<p>what is the DGI Supply Difference?</p>
</div>
<div id="theDGISupplyDifference" class="mainContainer">
<h1>Automated Procurement Solutions</h1>
<p>what is APS?</p>
</div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="js/application.js"></script>
</body>
</html>
here is the js:
$(function(){
$(".btn1").click(function(){
$("#fixedNavContainer").animate({
"opacity": 1,
//added this line and set initial css property to opacity:0;
"left": "50px"
});
});
});
http://jsfiddle.net/isherwood/8u6WX/
$(function(){
$(".btn1").click(function(){
$("#fixedNavContainer").animate({opacity: 1}, 1000);
});
});
Your syntax is incorrect. The animate method takes a numeric value, not a string, and you need to provide a duration.
http://api.jquery.com/animate/
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How can I use the HTML5 canvas element in IE?
I'm not sure what I'm doing wrong. I did what it said to do but nothing works. I'm using a grid system, but I don't think that's the problem. And I don't think it's my security settings either. Here's my HTML and Javascript if that helps.
HTML
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Zack Vivier</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--[if IE]><script type="text/javascript" src="js/excanvas.js"></script><![endif]-->
<!-- enable HTML5 elements in IE7+8 -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<!-- 1140px Grid styles for IE -->
<!--[if lte IE 9]><link rel="stylesheet" href="styles/ie.css" type="text/css" media="screen" /><![endif]-->
<link href="styles/styles.css" rel="stylesheet" type="text/css">
<link href="styles/1140.css" rel="stylesheet" type="text/css">
<!--css3-mediaqueries-js - http://code.google.com/p/css3-mediaqueries-js/ - Enables media queries in some unsupported browsers-->
<script type="text/javascript" src="js/css3-mediaqueries.js"></script>
<script src="js/js.js"></script>
</head>
<body>
<header>
<h1 class="hidden">Zack Vivier Home</h1>
<div class="container">
<div class="row">
<div class="fivecol">
<div class="logo"><img src="images/logo.png" alt="zack vivier logo"></div>
</div>
<div class="sevencol last">
<nav>
<h2 class="hidden">Site Navigation</h2>
<ul>
<li>Home</li>
<li>Information</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<div class="container">
<div class="row">
<div class="twelvecol last">
<div class="lineone"></div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="twelvecol last">
<div class="caption">
<h4 id="tagLine">Image Number</h4>
</div>
<div class="slideshow">
<canvas id='showCanvas' width='1022' height='397'>Canvas Not Supported</canvas>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="threecol last">
<div class="about"><h2>About Me</h2></div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="twelvecol last">
<div class="linetwo"></div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="sevencol last">
<div class="contenthome">
<p> My Name is Zack Vivier; currently I am 19</p>
<p>years old and attend Fanshawe College for Interactive</p>
<p>Media Design and Production. I am a Designer,</p
<p>Programmer, Musician, Video Editor, and Animator.</p>
</div>
</div>
</div>
</div>
<h1 class="hidden">footer</h1>
<div class="container">
<div class="row">
<div class="twelvecol last">
<div class="footer">
<h3>Copyright © 2012 Zack Vivier. All Rights Reserved.</h3>
</div>
</div>
</div>
</div>
</body>
</html>
Javascript
// JavaScript Document
var imagePaths = new Array("images/photo_1.png", "images/game_web.jpg", "images/tattoo.jpg");
var whichImage = new Array("Graffti Project", "Game WebSite", "Tattoo Project");
var showCanvas;
var showCanvasCtx;
var imageText;
var currentImage = 0;
var currentImageText = 0;
var img = document.createElement("img");
function init() {
imageText=document.getElementById('tagLine');
showCanvas = document.getElementById('showCanvas');
showCanvasCtx = showCanvas.getContext('2d');
img.setAttribute('width','1022');
img.setAttribute('height','397');
switchImage();
setInterval(switchImage, 2500);
}
function switchImage() {
imageText.innerHTML = whichImage[currentImageText++];
img.setAttribute('src',imagePaths[currentImage++]);
img.onload = function() {
if (currentImage >= imagePaths.length) {
currentImage = 0;
currentImageText = 0;
}
showCanvasCtx.drawImage(img,0,0,1022,397);
}
window.onload = init();
Canvas is a HTML5 element which IE8 doesn't supports.
Your doctype is also wrong since you're using HTML5 set it to: "".
As said in the comments: IE8 won't support the canvas tag. However there are some plugins that mimic it's behavior. I've used this one once: http://flashcanvas.net/ and it does the job, there's another called http://code.google.com/p/explorercanvas/. but i have no comment on that one, never used, don't know what to expect.
Just one note: the fallbacks will have their limitations, but as far as 2D drawing concerns, I think these will work out for you