I'm trying to use jQuery to animate a menu, making it enter the page from off screen when clicked. When I click on the menu button, the button just highlights. It's not working, what am I missing? Here's the code:
HTML
<html>
<head>
<title>Mrs. Rogers Math</title>
<link type="text/css" rel="stylesheet" href="mrm2.css"/>
<!--LINK TO JQUERY & FILE-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div id="header">
<img id="logoImg" src="http://www.mrsrogersmath.net/SVG_logo_2.png" alt="logoImg">
<img class="menuButton" src="http://www.mrsrogersmath.net/menuButton.png" alt="menuButton">
<ul class="menu">
<li id="menuLinks">Home </li>
<li id="menuLinks">Math Fun </li>
<li id="menuLinks">Helpful Links </li>
<li id="menuLinks">Contact Me </li>
</ul>
</div>
<script>document.write(jQuery.now());</script>
</body>
</html>
CSS
#header{
position: relative;
background-color:#636363;
width: auto;
height: 106px;
z-index: -1;
}
#logoImg{
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
}
.menuButton{
position: absolute;
right: 10px;
top: 20px;
z-index: 1;
background-color: none;
cursor: pointer;
}
.menu{
position: absolute;
right:-300px;
top:-18px;
z-index: 1;
width: 250px;
height: 400px;
background-color: #636363;
list-style-type: none;
border-radius:25px;
}
#menuLinks{
/*display:inline;*/
font-size: 15px;
color: white;
font-size:35px;
margin-right: 10px;
margin-top: 20px;
background-color:none;
}
JQUERY
var main = function() {
$('.menuButton').click(function() {
$('.menu').animate({
right: "10px"
}, 200);
});
};
$(document).ready(main);
It's about your #header having a negative z-index. It's "hidden" behind the body which results in you not being able to actually click the .menuButton.
Longer explaination: Giving the menu button a higher z-index than one of its parent elements (in this case, the #header) doesn't have any effect - it will still compete successfully with other descendants of the #header but it will not be displayed on top of the #headers parents or siblings. The #header's z-index will be the "dominant" one.
See also: stacking context as referred by #ajp15243 in the comments.
var main = function() {
$('.menuButton').click(function() {
$('.menu').animate({
right: "10px"}, 200);
});
};
$(document).ready(main);
#header{
position: relative;
background-color:#636363;
width: auto;
height: 106px;
z-index: 0;
}
#logoImg{
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
}
.menuButton{
position: absolute;
right: 10px;
top: 20px;
z-index: 5;
background-color: none;
cursor: pointer;
}
.menu{
position: absolute;
right:-300px;
top:-18px;
z-index: 1;
width: 250px;
height: 400px;
background-color: #636363;
list-style-type: none;
border-radius:25px;
}
#menuLinks{
/*display:inline;*/
font-size: 15px;
color: white;
font-size:35px;
margin-right: 10px;
margin-top: 20px;
background-color:none;
}
<html>
<head>
<title>Mrs. Rogers Math</title>
<link type="text/css" rel="stylesheet" href="mrm2.css"/>
<!--LINK TO JQUERY & FILE-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div id="header">
<img id="logoImg" src="http://www.mrsrogersmath.net/SVG_logo_2.png" alt="logoImg">
<img class="menuButton" src="http://www.mrsrogersmath.net/menuButton.png" alt="menuButton">
<ul class="menu">
<li id="menuLinks">Home </li>
<li id="menuLinks">Math Fun </li>
<li id="menuLinks">Helpful Links </li>
<li id="menuLinks">Contact Me </li>
</ul>
</div>
<script>document.write(jQuery.now());</script>
</body>
</html>
here, fixed for you.
Related
$(".menu").click(function () {
if ('.pagelinks').style.display = 'none';
{
$('.pagelinks').style.display = 'block';
}
else
{
$('.pagelinks').style.display = 'none';
}
})
html,body
{
margin:0;
width: 100%;
overflow:hidden;
box-sizing: border-box;
height: 100%;
}
body
{
background: url(best8.jpg);
background-repeat:no-repeat;
background-size:cover;
background-position: center;
}
header
{
width: 100%;
background-color: black;
height: 85px;
position: fixed;
}
.heading1
{
color:white;
position: relative;
align-content: center;
margin: 3em ;
top: 100px;
left: 675px;
}
.logo img
{
left: 0;
filter: brightness 100%;
position: fixed;
}
.menu
{
margin: auto;
margin-left: 75%;
display: block;
position: fixed;
top: 11px;
}
.nav div
{
height: 5px;
background-color: white;
margin: 4px 0;
border-radius: 25px;
transition: 0.3s;
}
.nav
{
width: 30px;
display: block;
margin: 1em 0 0
}
.one
{
width: 30px;
}
.two
{
width: 20px;
}
.three
{
width: 25px;
}
.nav:hover div
{
width: 30px;
}
.pagelinks
{
margin: auto;
margin-left: 49%;
position: fixed;
top: -10px;
display: none;
}
.pagelinks ul
{
list-style-type: none;
}
.pagelinks ul li
{
float: left;
padding:30px;
margin: auto;
transition: 0.3;
color: white;
font-size: 20px;
font-weight: bold;
padding-top: 40px;
opacity: 0.6;
}
.pagelinks ul li:hover
{
color: green;
transition: 0.6s;
}
.logo img:hover
{
opacity: 0.6;
}
<!DOCTYPE html>
<html>
<head>
<title>Goesta Calculators</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://use.typekit.net/axs3axn.js"></script>
<script>try{Typekit.load({ async: true});}catch(e){}</script>
<link href="style.css" rel="stylesheet" type="text/css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="main.js" type="text/javascript"></script>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<div class="container">
<div class="row">
<img src="NewLogo.PNG" >
<div class="menu">
<a href="" class="nav">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</a>
</div>
<nav class="pagelinks">
<ul>
<li>About</li>
<li>Contact</li>
<li>Calculators</li>
</ul>
</nav>
</div>
</div>
</header>
<div class="heading1">
<h1>Estimate. Plan your future.</h1>
</div>
</body>
</html>
I'm trying to make an unordered list show/hide when another div with .menu class, is clicked. I've tried several different ways in javascript from research online but nothing is working. I also want it to transition slowly and smoothly. When I click the menu (I'm assuming because its a link) the page seems to refresh.
First, your condition syntax is very wrong.
if ('.pagelinks').style.display = 'none';
Don't put semicolon in there. And wrap your condition with open and close parenthesis.
Second, use .css() if you want to modify your css.
Here's the working version of your jQuery
$(".menu").click(function () {
if ($('.pagelinks').css("display") == 'none')
{
$('.pagelinks').css("display", "block");
}
else
{
$('.pagelinks').css("display", "none");
}
})
Also, don't use anchor tag on your nav if it is only a trigger. Use <div> instead.
Like this
<div class="nav">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
And if you have problem with the cursor not transforming into a hand, just have this in your css
.nav:hover
{
cursor: pointer;
}
Working Sandbox of your code HERE
Is there a way to use jQquery to change the text content of my "video_box_label" span element in response to which slide is active in my "flexslider" slide show? In other words, when the slide moves to the second slide, I want it to change from "Meet the Team" to "Adil Saleem". I know that the slide show gives the active list item the "flex-active-slide" class, if that helps. Note that this code below won't be easy to preview because it points to some internally accessible jquery files. Also, I got the slider from this site: http://flexslider.woothemes.com/index.html
<link rel="stylesheet" href="https://epwork.ep.corp/wg/ProdPayroll/SiteAssets/ProductionPayrollHomeFlexslider.css" type="text/css" media="screen" />
<link href='https://fonts.googleapis.com/css?family=Asap' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Annie Use Your Telescope' rel='stylesheet'>
<script src="https://epwork.ep.corp/wg/ProdPayroll/jquery/jquery.min.js.js"></script>
<script defer src="https://epwork.ep.corp/wg/ProdPayroll/jquery/jquery.flexslider.js"></script>
<link rel="stylesheet" href="https://epwork.ep.corp/wg/ProdPayroll/SiteAssets/ProductionPayrollHomeSlideShow.css">
<script src="https://epwork.ep.corp/wg/PayrollSolutions/SolutionsSetup/SiteAssets/plyr.js"></script>
<script src="https://epwork.ep.corp/wg/PayrollSolutions/SolutionsSetup/SiteAssets/jquery1.9.0.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
start: function(slider){
$('body').removeClass('loading');
}
});
jQuery( '.flexslider' ).flexslider( 'pause' );
});
$(document).ready(function() {
$("#Abijah_Ayele_image").click(function(){
$("#Abijah_Ayele_slide").html('<video poster="https://epwork.ep.corp/wg/ProdPayroll/Images_People/Abijah_Ayele.jpg" controls preload="none">'+
'<source id="video_player_source1" src="https://epwork.ep.corp/wg/ProdPayroll/Videos_People/Abijah_Ayele.mp4" type="video/mp4">'+
'</video>')+'<p class="flex-caption">Abijah Ayele</p>';
});
$("#slide_image_2").click(function(){
$("#slide2").html('<video poster="https://epwork.ep.corp/wg/ProdPayroll/Images_People/Adil_Saleem.jpg" controls preload="none">'+
'<source id="video_player_source2" src="https://epwork.ep.corp/wg/ProdPayroll/Videos_People/Adil_Saleem.mp4" type="video/mp4">'+
'</video>');
});
$("#slide_image_3").click(function(){
$("#slide3").html('<video poster="https://epwork.ep.corp/wg/ProdPayroll/Images_People/Adriel_Balatbat.jpg" controls preload="none">'+
'<source id="video_player_source2" src="https://epwork.ep.corp/wg/ProdPayroll/Videos_People/Adriel_Balatbat.mp4" type="video/mp4">'+
'</video>');
});
});
$(document).ready(function() {
$('.flexslider').click(function() {
$("video").each(function(){
$(this).get(0).pause();
jQuery( '.flexslider' ).flexslider( 'pause' );
});
});
});
</script>
<style>
#font-face{
font-family:"flexslider-icon";
src: url("https://epwork.ep.corp/wg/ProdPayroll/SiteAssets/flexslider-icon.eot") /* EOT file for IE */
}
#font-face{
font-family:"flexslider-icon";
src: url("https://epwork.ep.corp/wg/ProdPayroll/SiteAssets/flexslider-icon.ttf") /* TTF file for CSS3 browsers */
}
a:hover{
text-decoration: none !important;
}
#WoodenBackgroundContainer{
background-image: url('/wg/ProdPayroll/Images_Decorative/WoodBackgroundDark.jpg') !important;
width: 100%;
height: 1300px;
}
#container{
margin: 0 auto;
left: 0;
right: 0;
width: 1000px;
height: 1300px;
background: linear-gradient(#88D4E6, #307996) !important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#88D4E6, endColorstr=#307996); /* For IE 11*/
text-align: center;
position: absolute;
}
#decorative_side_bar_left{
position:absolute;
height: 1300px;
left: 0;
width: 38px;
background-image: url("https://epwork.ep.corp/wg/ProdPayroll/Images_Decorative/decorative_diagonal_side_bar.jpg");
z-index: 1;
}
#decorative_side_bar_right{
position:absolute;
height: 1300px;
width: 38px;
right: 0;
background-image: url("https://epwork.ep.corp/wg/ProdPayroll/Images_Decorative/decorative_diagonal_side_bar.jpg");
z-index: 1;
}
#bulb1{
position:relative;
right: 20px;
top: 70px;
width: 100px;
display: inline;
}
#payroll_welcome_header{
font-family: 'Asap';
font-size: 350%;
text-align: center;
padding-top: 68px;
display: inline;
}
#bulb2{
position:relative;
left: 20px;
top: 70px;
width: 100px;
display: inline;
}
#payroll_welcome_statement{
font-family: 'Asap';
text-align: center;
font-size: 190%;
}
#bulletin_board_backdrop{
height: 225px;
width: 1000px;
right: 0;
background-image: url("https://epwork.ep.corp/wg/ProdPayroll/Images_Decorative/bulletin-background.jpg");
}
#postit_1_container{
position: relative;
display: inline-block;
margin-right: 0px;
transform: rotate(-12deg);
top:16px;
}
#postit_1{
width: 225px;
}
#post_it_text1{
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%) rotate(-1deg) !important;
font-size: 29px;
font-family: 'Annie Use Your Telescope';
}
#postit_2_container{
position: relative;
display: inline-block;
margin-left: 115px;
transform: rotate(12deg);
top:16px;
}
#postit_2{
width: 225px;
}
#post_it_text2{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-1deg) !important;
font-size: 29px;
width: 190px;
font-family: 'Annie Use Your Telescope';
}
#video_box_label{
display: block;
font-size: 24px;
font-family: 'Asap';
color: #FFFFFF;
}
.flexslider{
height: 415px;
width: 746px;
background-color: #696969;
margin: auto;
margin-top: 4px;
}
.flexslider video{
width:100%;
}
.flexslider img{
height: 415px !important;
}
.flexslider video{
height: 415px !important;
}
.flex-caption{
font-size: 15px !important;
margin-top:65px !important;
}
/* this makes the image poster fit the video viewport
video{
object-fit: inherit;
}
*/
</style>
<div id="WoodenBackgroundContainer">
<div id="container">
<div id="decorative_side_bar_left"></div>
<div id="decorative_side_bar_right"></div>
<img id="bulb1" src="https://epwork.ep.corp/wg/ProdPayroll/Images_Decorative/lightbulb_icon.png" />
<h1 id="payroll_welcome_header">WELCOME TO THE PRODUCTION PAGES</h1>
<img id="bulb2" src="https://epwork.ep.corp/wg/ProdPayroll/Images_Decorative/lightbulb_icon.png" />
<h2 id="payroll_welcome_statement">Reinventing how the entertainment industry works<br/>and interacts to make production simple</h2>
<br/><br/><br/><br/><br/><br/>
<span id="video_box_label">Meet the Team:</span>
<div class="flexslider">
<ul class="slides">
<li id="Abijah_Ayele_slide">
<img id="Abijah_Ayele_image" src="https://epwork.ep.corp/wg/ProdPayroll/Images_People/Abijah_Ayele.jpg">
</li>
<li id="slide2">
<img id="slide_image_2" src="https://epwork.ep.corp/wg/ProdPayroll/Images_People/Adil_Saleem.jpg">
</li>
<li id="slide3">
<img id="slide_image_3" src="https://epwork.ep.corp/wg/ProdPayroll/Images_People/Adriel_Balatbat.jpg">
</li>
</ul>
</div>
</div>
</div>
You could use the after or before function of flexslider and target some data you want to put into the span. I use the after function in my example to change the title span to the data-text attribute of the the current image.
Hope that helps.
$('.flexslider').flexslider({
animation: "slide",
after: function(){
//console.log("do Something");
var target = $(".flex-active-slide img").attr("data-text");
$("#titleHere").html(target);
}
});
.flexslider {
width: 200px;
height: 200px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.4/flexslider.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.4/jquery.flexslider-min.js"></script>
<!-- Place somewhere in the <body> of your page -->
<span id="titleHere">TITLE HERE</span>
<div class="flexslider">
<ul class="slides">
<li>
<img src="https://dummyimage.com/200" data-text="NEW TITLE 1"/>
</li>
<li>
<img src="https://dummyimage.com/210" data-text="NEW TITLE 2"/>
</li>
<li>
<img src="https://dummyimage.com/220" data-text="NEW TITLE 3"/>
</li>
<li>
<img src="https://dummyimage.com/230" data-text="NEW TITLE 4"/>
</li>
</ul>
</div>
This jQuery snippet would change the text content of your "video_box_label" span element to "Adil Saleem". See https://www.w3schools.com/jquery/html_text.asp
$('#video_box_label').text('Adil Saleem');
I've just started to get into jQuery, so I apologise for the bad coding in advance. I just recognised that whenever I scroll a bit down so that just a bit of the jQuery image slider is visible on the top of the page, it scrolls me automatically back to top when the jQuery image slider changes the picture. But when I am as far down on the page that the slider isn't visible at all or when I barely scroll down so that the most part of the slider is still on the screen, it doesn't scroll me back to top.
I would appreciate any help since I am not able to find the issue.
Thanks in advance.
$('#back_to_top').click(function()
{
$('html, body').animate({scrollTop: 0});
return false;
});
// Nav bar drop down code
$('#deals_a').hover(function(){
$('#deals_dropdown').stop(true, true).slideDown('medium');
});
if(!$('#deals_dropdown').is(':hover')){
$('#deals').mouseleave(function(){
$('#deals_dropdown').stop(true, true).slideUp('medium');
});
} else {
$('#deals_dropdown').mouseleave(function(){
$('#deals_dropdown').stop(true, true).slideUp('medium');
});
};
$('#services_a').hover(function(){
$('#services_dropdown').stop(true, true).slideDown('medium');
});
if(!$('#services_dropdown').is(':hover')){
$('#services').mouseleave(function(){
$('#services_dropdown').stop(true, true).slideUp('medium');
});
} else {
$('#services_dropdown').mouseleave(function(){
$('#services_dropdown').stop(true, true).slideUp('medium');
});
};
// Slider button code
$('.slider_button').hover(function(){
$('.slider_button').removeClass('active_button');
$(this).addClass('active_button');
$('.slide').hide();
$($('#slider').children()[$(this).index()]).show();
});
// Slider code
$(document).ready(function(){
// Set options
var speed = 500; // Fade speed
var autoswitch_speed = 4000; // Auto slider speed
var myInterval = setInterval(nextSlide, autoswitch_speed);
// Add initial active class
$('.slide').first().addClass('active');
// Hide all slides
$('.slide').hide();
// Show first slide
$('.active').show();
// show the first node
($($('#slider_button_container').children()[0])).addClass('active_button');
var counter = 1;
// Switch to next slide
function nextSlide(){
clearInterval(myInterval);
$('.slider_button').removeClass('active_button');
($($('#slider_button_container').children()[counter - 1])).removeClass('active_button');
($($('#slider_button_container').children()[counter])).addClass('active_button');
$('.active').removeClass('active').addClass('oldActive');
if($('.oldActive').is(':last-child')){
$('.slide').first().addClass('active');
($($('#slider_button_container').children()[3])).removeClass('active_button');
($($('#slider_button_container').children()[0])).addClass('active_button');
counter = 0;
} else {
$('.oldActive').next().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.slide').fadeOut(speed);
$('.active').fadeIn(speed);
counter = (counter + 1) % 4;
myInterval = setInterval(nextSlide, autoswitch_speed);
}
});
*{
margin: 0;
padding: 0;
}
body{
width: 100%;
height: 100%;
}
header{
width: 100%;
height: 600px;
text-align: center;
}
#nav_menu{
height: 98px;
display: inline-block;
border-bottom: 2px solid #FFF;
padding: 0 20px 0 20px;
position: relative;
z-index: 2;
}
.nav_menu_items{
float: left;
margin: 10px;
padding-bottom: 10px;
width:auto;
line-height: 80px;
}
.nav_menu_items a{
text-decoration: none;
color: #FFF;
font-size: 20px;
font-weight: bold;
position: relative;
font-family: 'Exo 2', sans-serif;
font-style: italic;
}
.nav_menu_sup:hover::after{
content: "\25B2";
position: absolute;
left: 40%;
top: 14px;
}
#back_to_top, #back_to_top img{
position: fixed;
width: 50px;
height: 50px;
right: 50px;
bottom: 50px;
display:block;
}
.dropdown{
display:none;
height: auto;
width: auto;
font-family: 'Exo 2', sans-serif;
font-size: 20px;
font-weight: bold;
font-style: italic;
position: absolute;
background: #FFF;
top:100px;
line-height: 20px;
list-style-type: none;
}
.color_1{
background: #4BB7BE;
}
.color_2{
background: #2A7287;
}
.dropdown li{
padding: 10px;
;
}
.dropdown li:hover{
}
.dropdown li a{
color: #FFF;
}
.dropdown li a:hover{
color: #FFA;
}
#slider{
position: relative;
width: 100%;
height: 100%;
margin-top: -105px;
z-index: 1;
overflow: hidden;
}
.slide img{
height: 600px;
}
.darkening_layer{
width: 100%;
height: 600px;
position: absolute;
background: rgba(0, 0, 0, 0.2);
}
#slider_button_container{
position: relative;
display: inline-block;
top: -50px;
z-index: 2;
}
.slider_button{
height: 18px;
width: 18px;
border-radius: 50%;
border: 3px solid #FFF;
float: left;
z-index: 100;
margin-left: 10px;
cursor: pointer;
position: relative;
display: block;
}
.slider_button:hover{
background: #FFF;
}
.active_button{
background: #FFF;
}
#first_slider_button{
}
#welcome{
background: #007DCC;
width: 100%;
height: 400px;
}
#advertise{
background: #004E7F;
width: 100%;
height: 400px;
}
footer{
width: 100%;
height: 400px;
background-color: #007DCC;
}
.clear{
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sea Kozmetik ve Güzellik</title>
<link rel="stylesheet" style="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Bitter|Exo+2" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="container">
<header>
<div id="nav_menu">
<div id="home" class="nav_menu_items">
<a class="nav_menu_sup" href="#">ANASAYFA</a>
</div>
<div id="about" class="nav_menu_items">
<a class="nav_menu_sup" href="#">HAKKIMIZDA</a>
</div>
<div id="deals" class="nav_menu_items">
<a class="nav_menu_sup" id="deals_a" href="#">KAMPANYALAR</a>
<ul id="deals_dropdown" class="dropdown">
<li class="color_1">Öğrenci Kampanyaları</li>
<li class="color_2">Epilasyon Kampanyaları</li>
<li class="color_1">Cilt Bakımı Kampanyaları</li>
</ul>
</div>
<div id="services" class="nav_menu_items">
<a class="nav_menu_sup" id="services_a" href="#">HİZMETLERİMİZ</a>
<ul id="services_dropdown" class="dropdown">
<li class="color_1">Cilt Bakımı</li>
<li class="color_2">Depilasyon</li>
<li class="color_1">Epilasyon</li>
<li class="color_2">Manikür</li>
<li class="color_1">Pedikür</li>
<li class="color_2">Tırnak Bakımı</li>
<li class="color_1">Kaş Tasarımı</li>
<li class="color_2">Makyaj</li>
</ul>
</div>
<div id="products" class="nav_menu_items">
<a class="nav_menu_sup" href="#">ÜRÜNLERİMİZ</a>
</div>
<div id="gallery" class="nav_menu_items">
<a class="nav_menu_sup" href="#">GALERİ</a>
</div>
<div id="contact" class="nav_menu_items">
<a class="nav_menu_sup" href="#">İLETİŞİM</a>
</div>
</div>
<!-- Picture size must be 1519px x 600px -->
<div id="slider">
<div id="first_slide" class="slide">
<div class="darkening_layer"></div>
<img src="images/slide_7.jpg" alt="">
</div>
<div id="second_slide" class="slide">
<div class="darkening_layer"></div>
<img src="images/slide_8.jpg" alt="">
</div>
<div id="third_slide" class="slide">
<div class="darkening_layer"></div>
<img src="images/slide_9.jpg" alt="">
</div>
<div id="fourth_slide" class="slide">
<div class="darkening_layer"></div>
<img src="images/slide_10.jpg" alt="">
</div>
</div>
<div id="slider_button_container">
<div id="first_slider_button" class="slider_button"></div>
<div id="second_slider_button" class="slider_button"></div>
<div id="third_slider_button" class="slider_button"></div>
<div id="fourth_slider_button" class="slider_button"></div>
<div class="clear"></div>
</div>
</header>
<div id="back_to_top">
<img src="images/arrow_up.png" alt="back to top">
</div>
<section id="welcome">
</section>
<section id="advertise">
</section>
<footer>
</footer>
</div>
<script src="js/script.js"></script>
</body>
</html>
So I'm trying to make my website as responsive as possible but for some weird reason, I cannot apply an alternative stylesheet to my homepage via media queries for a different screen resolution.
let me explain, my homepage consists of a slideshow done in javascript however when a smaller resolution is used, the images are too big so I want to put some alternative content there using a different css sheet. I tried doing it on my other pages and it worked like a charm (note that there is no javascript within the other pages). I assume that maybe the javascript code is preventing the alternative stylesheet from loading. More specifically, I want the slideshow to show up only on 1920x1080 resolutions, on other resolutions I want other content. Sorry for the long question, I hope I'm making sense. Here is the html from my homepage:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="Affordable and professional web design">
<meta name="keywords" content="web design, affordable web design,
professional web design">
<meta name="author" content="#">
<title>Light Designs | Welcome</title>
<link rel="stylesheet" href="index/index.css">
<link rel="stylesheet" media="screen and (max-width: 1366px)"
href="index/res.css"/>
<script src="jquery-3.2.1.js"></script>
<!--<script type="text/javascript">
$('body,html').css("overflow","hidden");-->
</script>
</head>
<body>
<header>
<div class="container">
<h1 id="logo"><a href="index.html"><img src="index/logo.png" alt="logo"/>
</a></h1>
<nav>
<ul>
<li class="current">home |</li>
<li>services |</li>
<li>about</li>
</ul>
</nav>
</div>
</header>
<div class="slider">
<ul class="slides">
<li class="slide"><img src="index/showcase.png" alt="#"/></li>
<li class="slide"><img src="index/pic4.png" alt="#"/></li>
<li class="slide"><img src="index/pic3.png" alt="#"/></li>
<li class="slide"><img src="index/pic5.png" alt="#"/></li>
<li class="slide"><img src="index/pic4.png" alt="#"/></li>
</ul>
</div>
<script type="text/javascript">
var myInterval = setInterval(function() {
console.log(new Date());
}, 1000);
</script>
<script type="text/javascript">
$(function() {
//configuration
var width = 1920
var animationSpeed = 1000;
var pause = 4000;
var currentSlide = 1;
//cache DOM
var $slider = $('.slider');
var $slideContainer = $slider.find('.slides');
var $slides = $slideContainer.find('.slide');
var interval;
function startSlider() {
interval = setInterval(function() {
$slideContainer.animate({'margin-left': '-='+width}, animationSpeed,
function(){
currentSlide++;
if (currentSlide === $slides.length) {
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
}, pause);
}
function stopSlider() {
clearInterval(interval);
}
$slider.on('mouseenter', stopSlider).on('mouseleave', startSlider);
startSlider();
});
</script>
<section id="newsletter">
<div class="container">
<h1>Subscribe To Our Newsletter</h1>
<form>
<input class="emailBox_1" type="email" placeholder="Enter Email...">
<button class="button_1" type="submit" class="button_1">
<span>Subscribe</span></button>
</form>
</div>
</section>
<footer>
<p>Light designs, Copyright © 2017</p>
</footer>
</body>
</html>
And here's the css
body {
font: 15px/1.5 Arial, Helvetica,sans-serif;
padding: 0;
margin: 0;
background-color: #0099ff;
width: 100%;
}
/* Global */
div.container {
width: 80%;
margin: auto;
overflow: hidden;
}
header {
background: #35424a;
color: #ffffff;
padding-top: 0px;
max-height: 70px;
height: 50%;
border-bottom: #0099ff 4.5px solid;
color: white;
}
#logo {
float: left;
position: relative;
bottom: 30px;
}
nav {
float: right;
position: relative;
top: 10px;
right: 60px;
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
nav li {
display: inline;
}
a {
color: #ffffff;
text-decoration: none;
}
a:hover {
color: #0099ff;
}
header .current a{
color: #0099ff;
font-weight:bold;
}
.slider {
width: 1920px;
height: 780px;
overflow: hidden;
}
.slider .slides {
display: block;
width: 9600px;
height: 780px;
margin: 0;
padding: 0;
}
.slider .slide {
float: left;
list-style-type: none;
width: 1920px;
height: 780px;
}
#newsletter{
position: relative;
bottom: 10px;
color: #ffffff;
background: #35424a;
}
#newsletter form {
float:right;
margin-top: 7px;
position: relative;
bottom: 8px;
}
#newsletter h1{
margin-bottom: 0px;
float:left;
position: relative;
bottom: 5px;
}
#newsletter input[type="email"]{
padding:4px;
height:25px;
width:250px;
}
.button_1 {
display: inline-block;
border-radius: 4px;
background-color: #0099ff;
border: none;
color: #FFFFFF;
line-height: 4px;
font-size: 20px;
padding: 20px;
padding-top: 18px;
padding-bottom: -2;
width: 150px;
height: 30px;
transition: all 1s;
cursor: pointer;
margin: 5px;
position: relative;
top: 4px;
}
.button_1 span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button_1 span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button_1:hover span {
padding-right: 25px;
}
.button_1:hover span:after {
opacity: 1;
right: 0;
}
footer{
background-color:#0099ff;
color: #ffffff;
text-align: center;
padding: 10px;
margin-top: 0;
position: relative;
bottom: 10px;
height: 20px;
}
footer p {
position: relative;
bottom: 6px;
}
You could use a media query (placing it after .slider) to hide the slider container:
#media (max-width: 1919px) {
.slider {
display:none;
}
}
could you help me improve this code below?! I´m trying to work a sidebar menu with jquery but i do´t know where I´m going wrong...
Here goes my codes:
html:
<!DOCTYPE html>
<html lang="PT-BR">
<head>
<meta charset="utf-8">
<title>Teste Menu c Javascript</title>
<link rel="stylesheet" href="css/style.css">
<link href="/js/jquery-3.2.0.min.js">
</head>
<body>
<div class="sidebar">
<ul>
<h2>Menu</h2>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="nav">
<img src="images/menu-icon.jpg" width="30px;" class="menu-bar"/>
</div>
<script src="js/script.js"></script>
</body>
</html>
css:
body{
margin: 0;
}
.sidebar{
position: absolute;
width: 250px;
height:100%;
background: #333;
color: white;
font-family: arial;
outline: 1px solid #2a2a2a;
}
.sidebar h2{
text-align: center;
margin: 0;
padding: 10px;
background: #2a2a2a;
}
.sidebar ul{
list-style: none;
padding: 0;
margin: 0;
}
.sidebar li{
outline: 1px solid #2a2a2a;
transition: all 0.3s;
}
.sidebar li:hover{
background: #444;
border-left: 5px solid #eee;
}
.sidebar a{
text-decoration: none;
color: white;
display: block;
padding: 10px;
}
.nav{
width: 100%;
height: 100%;
position: absolute;
background: white;
padding: 30px;
transition: all 0.3s;
}
.menu-bar{
cursor: pointer;
}
.open{
transform: translateX(250px);
}
js:
$('.menu-bar').on('click', function(){
$('.nav').toggleClass('open');
});
I don´t know if the problem is the jquery link or something else...
Your code is not totally correct. From a semantic point of view, the h2 tag, and, nothing, should stay within the ul tag and outside a li tag.
Here simple example:
This example uses the css translate3d feature, that runs on GPU and not on CPU, this is a good thing for performance issues.
https://jsfiddle.net/c4hjhbp4/
html
<div class="nav">
<button id='show-hide-menu'>
Menu
</button>
</div>
<div class="sidebar-container">
<div class="sidebar" id='sidebar'>
<h2>Menu</h2>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
javascript (jQuery)
$('#show-hide-menu').click(function() {
if ($('#sidebar').hasClass('visible')) {
$('#sidebar').removeClass('visible');
} else {
$('#sidebar').addClass('visible');
}
});
css
body, html {
margin: 0;
padding: 0;
}
.sidebar-container {
position: relative;
width: 0;
height: 0;
}
.sidebar {
position: absolute;
width: 230px;
height: 400px;
background: #ccc;
transform: translate3d(-230px,0,0);
transition: transform 0.5s;
}`enter code here`