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/
Related
Here is my code: When I click on one button, it hide all links. And show on one button also. Links and titles are lists which change their lengths in python. I want to show the link of only button which is clicked not all. I have also tried using div but also same problem.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Python Jobs</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.3/css/bulma.min.css">
<section class="hero is-dark is-bold">
<div class="hero-body">
<p class="title">
Job Title
</p>
<p class="subtitle">
Python jobs
</p>
</div>
</section>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("a").hide();
});
$("#show").click(function(){
$("a").show();
});
})
</script>
</head>
<body>
<section class="section">
<div class="container">
{% for i in range(0, len-1) %}
<h3>{{i+1}}. {{title[i]}}</h3>
<a href={{links[i]}}>{{links[i]}}</a>
<button id="show">Show</button>
<button id="hide"> Hide</button>
<br>
{% endfor %}
</div>
</section>
</body>
</html>
There are multiple problem in your code.
id must be unique so use class instead of id.
Wrap your each heading and link with container. In your case move your div inside for loop.
Based upon your button click find your heading and link to show / hide.
Initially hide your heading and link (It's depend upon your logic, how you want to present UI)
Example:
$(".hide").click(function() {
$(this).parent('div').find('a ,h3').hide();
});
$(".show").click(function() {
$(this).parent('div').find('a ,h3').show();
});
a,
h3 {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<h3>Title1</h3>
Link1
<button class="show">Show</button>
<button class="hide"> Hide</button>
</div>
<div class="container">
<h3>Title2</h3>
Link2
<button class="show">Show</button>
<button class="hide"> Hide</button>
</div>
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>
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");
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
I'm using the "DynamicPage" jQuery plugin to make my pages not reload when navigating. On the index page is a image slider plugin called "Coin-Slider". The dynamic page works fine, except when I click to go back to the index page where the image slider is. For some reason (from what I can tell) the Coin-Slider ready function isn't activating when it goes back to the index. May be something to do with the URL, as host.com/index.php works but host.com/#index.php does not. Any reason why it's doing this? I've tried including the ready function in the DynamicPage function in the js file to execute whenever the page changes, but it didn't help. Page is included below.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css.css" rel="stylesheet" type="text/css" />
<title>Liberty Design, Scarborough</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type='text/javascript' src='js/jquery.ba-hashchange.min.js'></script>
<script type='text/javascript' src='js/dynamicpage.js'></script>
<script type="text/javascript" src="coin-slider/coin-slider.min.js"></script>
</head>
<body>
<div id="nav-back"></div>
<div id="wraps">
<div id="left-wrap"></div>
<div id="right-wrap"></div>
</div>
<div style="background:url(images/layout/shadow-bottom.png) no-repeat bottom center; width:900px; margin:0 auto; padding-bottom: 26px;">
<div id="page-wrap">
<div id="header">
<div id="banner">
<div id="social"><img src="images/layout/facebook.png" alt="Like us on Facebook!" /></div>
</div>
</div>
<navbar>
<div id="nav">
<div style="background:url(images/layout/gradient-up.png) repeat-x;height:20px;position:relative;top:-20px; z-index:999;"></div>
<ul id="navbar">
<li>Home</li>
<li>Facilities</li>
<li>Staff</li>
<li>Where are we?</li>
<li>Contact</li>
</ul>
</div>
</navbar>
<section id="main-content">
<div id="guts">
<!-- Content Start -->
<div style="background:url(images/layout/sides.png) center center no-repeat; height:373px;">
<div id="gamesHolder">
<div id="games">
<img src="images/banner_img/1335800583.png" alt="Welcome" />
<span>
<b>Welcome</b><br/>
Welcome to Liberty
</span>
<img src="images/banner_img/1335800633.png" alt="shop front" />
<span>
<b>shop front</b><br/>
this is the front of the shop
</span>
<img src="images/banner_img/" alt="staff #3" />
<span>
<b>staff #3</b>
<br/>this is the description for staff #3
</span>
<img src="images/banner_img/" alt="staff #1" />
<span>
<b>staff #1</b><br/>
this is staff #1
</span>
<img src="images/banner_img/" alt="asdas" />
<span>
<b>asdas</b><br/>
sdasdas
</span>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('#games').coinslider({ navigation: true, height:325, width: 595, hoverPause: true, delay: 5000,});
});
</script>
</div>
</section>
<div id="footer">
<!-- Cosmetics for the footer -->
<div id="footer-back"></div>
<div id="footer-wraps">
<div id="footer-left-wrap"></div>
<div id="footer-right-wrap"></div>
</div>
<div style="background:url(images/layout/gradient-up.png) repeat-x;height:20px;position:relative;top:-20px;"></div>
<center style="position:relative; top:-8px; color:#999;">Liberty Design, Scarborough - Website by Chain.</center>
</div>
</div>
</div>
</body>
</html>
Ok, mydomain.com and mydomain.com/#anything are the same, they point to your default file which can be index.php, index.html or whatever. The browser doesn't refresh while it navigates to the same file but diffrent hash tags like: from file#hashA to file#hashB or from file to file#hashRandom or from file#index.php to file. Since the page doesn't refresh (gets loaaded) the document ready doesn't gets fired either (it already got fired the first time the page got loaded).
First fix to your problem:
instead of linking to mydomain.com/#index.php link to mydomain.com or mydomain.com/index.php
Second fix is:
<script>
$(document).ready(function() {
var sliderInit = false;
$('#games').coinslider({ navigation: true, height:325, width: 595, hoverPause: true, delay: 5000,});
// Adding fix
$('#idOfLinkThatGetsClicked').click(function () {
if (!sliderInit) {
$('#games').coinslider({ navigation: true, height:325, width: 595, hoverPause: true, delay: 5000,});
sliderInit = true;
}
});
});
</script>