I'm attempting to build a page using Themeroller widgets and I've run into some bugs and can't figure out why. The first one: my drag element keeps going behind my drop element instead of over it. Second one: My tabs aren't showing ups as tabs but rather an unordered list (This one isn't necessarily a bug, I'm just very new to jQuery UI and I'm having difficulty linking both custom themes and themes from a CDN, if anyone can explain what I'm doing wrong it'd be much appreciated). And the last one: I'm trying to use datepicker() (which of course doesn't have a theme right now) to have the user input their birthday. I would like them to press and go and receive a notification that just spits their birthday back at them, I can't seem to be able to do this with ($datepicker).value. Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>ThemeRoller</title>
<link type="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/dark-hive/jquery-ui.css ">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
body{
height:680px;
width:auto;
background: -webkit-linear-gradient(bottom, #c7c7c7 10%, #00223E 90%);
background: -moz-linear-gradient(bottom, #c7c7c7 10%, #00223E 90%);
background: -ms-linear-gradient(bottom, #c7c7c7 10%, #00223E 90%);
background: -o-linear-gradient(bottom, #c7c7c7 10%, #00223E 90%);
background: linear-gradient(bottom, #c7c7c7 10%, #00223E 90%);
color:ghostwhite;
}
#navbar{
height:30px;
width:auto;
border-bottom:2px solid ghostwhite;
top:45px;
left:0;
right:0;
position: absolute;
}
#draggable{
height:50px;
width:150px;
border:1px solid black;
top:40px;
left:550px;
background:#182E4C;
padding:5px;
box-shadow: 0px 0px 10px 5px ghostwhite;
overflow-y: auto;
overflow-x: hidden;
}
#draggable span{
display:table;
margin:0 auto;
margin-top:15px;
}
#droppable{
position: absolute;
top:225px;
left:490px;
width:300px;
height:150px;
border:1px solid black;
padding 5px;
background: #33526E;
box-shadow:0px 0px 50px 10px black;
}
#droppable span{
display: table;
margin: 0 auto;
margin-top: 60px;
}
#birthday{
position:absolute;
top:460px;
left:573px;
width:auto;
height:200px;
}
#birthday span{
display: table;
margin:0 auto;
margin-bottom:10px;
}
#tabs{
width:200px;
bottom:0px;
left:0px;
top:75px;
border-top:2px solid ghostwhite;
border-right:2px solid ghostwhite;
border-bottom:2px solid ghostwhite;
position: absolute;
}
#sortable span{
display:table;
margin:0 auto;
margin-top: 20px;
}
#sortable{
width:200px;
bottom:0px;
right:0px;
top:75px;
border-top:2px solid ghostwhite;
border-bottom: 2px solid ghostwhite;
border-left: 2px solid ghostwhite;
position: absolute;
}
ol {
margin:0 0 10px 0
}
li:not(:last-child) {
margin-bottom: 10px;
}
</style>
<script>
$(init);
function init(){
var divdrag=$('#draggable');
var divdrop=$('#droppable');
var divsort=$('#fruitlist');
var divtab=$('#tabs');
divdrag.draggable()
divdrop.droppable({
drop:function(){
divdrag.text("Dropped!");
},
out: function(){
divdrag.text("No! Please drop me!");
},
over: function(){
divdrag.text("Please drop me! Pls...");
}
})
divsort.sortable();
divtab.tabs();
$('#datepicker').datepicker();
}
function birthday(){
var birth=$('#datepicker').value;
alert('You were born on: '+birth);
}
</script>
</head>
<body>
<h1 style="text-align:center">Themeroller</h1>
<div id="navbar"></div>
<div id='draggable'><span>Drag me!</span></div>
<div id='droppable'><span>Drop here!</span></div>
<div id='birthday'>
<span>Enter your birthday!</span>
<input type='text' id='datepicker'>
<input type='button' id='btn1' value='Go!' onClick=birthday()/>
</div>
<div id='tabs'>
<ul>
<li>Home</li>
<li><a href='#tabs-2'>About</a></li>
<li><a href='#tabs-3'>Products</a></li>
</ul>
<div id='#tabs-1'>Welcome to my best jQuery page yet!</div>
<div id='#tabs-2'>Sometimes I go a little overboard with compsci</div>
<div id='#tabs-3'>I also make and sell word clocks built with Arduino microcontrollers!</div>
</div>
<div id='sortable'><span>Sort me!</span>
<span id="fruits">
<ol id="fruitlist">
<li>Apples</li>
<li>Bananas</li>
<li>Pineapples</li>
<li>Lemons</li>
<li>Kiwis</li>
<li>Strawberries</li>
<li>Oranges</li>
<li>Mango</li>
<li>Plums</li>
<li>Peaches</li>
<li>Apricots</li>
<li>Squash</li>
<li>Honeydew</li>
<li>Watermelons</li>
</ol>
</div>
</body>
Edit: Oops. Well I got my theme working. was using type="stylesheet" instead of rel="stylesheet"
Edit 2: I made a second page with nearly identical drag and drop code and the drag element goes over the drop element. So something else in my page must be causing it but I don't know what. Here's the drag/drop code in the new document.
$(function(){
var drag = $('#dragdiv');
var drop =$('#dropdiv');
drag.draggable();
drop.droppable({
drop: function(){
drag.text('Dropped!');},
out: function(){
drag.text('No! Please! Take me back!');},
over: function(){
drag.text('Please drop me! Pls...');
}
});
});
It is nearly identical. In fact, I copied and pasted this code into my original document and still get the drag element going behind the drop element in the original. Something tells me my CSS isn't playing nice with my code.
Did it. Wasn't able to figure out how to do the datepicker value though.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
div{
font:12px normal arial, helvetica;
}
body{
height:670px;
width:auto;
background: -webkit-linear-gradient(bottom, #c7c7c7 10%, #00223E 90%);
background: -moz-linear-gradient(bottom, #c7c7c7 10%, #00223E 90%);
background: -ms-linear-gradient(bottom, #c7c7c7 10%, #00223E 90%);
background: -o-linear-gradient(bottom, #c7c7c7 10%, #00223E 90%);
background: linear-gradient(bottom, #c7c7c7 10%, #00223E 90%);
color:ghostwhite;
}
#navbar{
height:30px;
width:auto;
border-bottom:2px solid ghostwhite;
top:45px;
left:0;
right:0;
position: absolute;
}
#dragdiv{
height:50px;
width:150px;
border:1px solid black;
top:100px;
left:565px;
background-color:#182E4C;
padding:5px;
box-shadow: 0px 0px 10px 5px ghostwhite;
position: absolute;
}
#dropdiv{
position: absolute;
top:225px;
left:490px;
width:300px;
height:150px;
border:1px solid black;
padding 5px;
background-color: #33526E;
box-shadow:0px 0px 50px 10px black;
}
#dragdiv span{
display:table;
margin:0 auto;
margin-top:15px;
}
#dropdiv span{
display: table;
margin: 0 auto;
margin-top: 60px;
}
#birthday{
position:absolute;
top:460px;
left:573px;
width:auto;
height:200px;
}
#birthday span{
display: table;
margin:0 auto;
margin-bottom:10px;
}
#tabs{
width:200px;
bottom:0px;
left:0px;
top:75px;
border-top:2px solid ghostwhite;
border-right:2px solid ghostwhite;
position: absolute;
background: #5D5D5D ;
}
ul.tabs{
margin: 0px;
padding: 0px;
list-style: none;
}
ul.tabs li{
background: none;
color: #222;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
}
ul.tabs li.current{
background: grey;;
color: #222;
}
.tab-content{
display: none;
background: grey;
padding: 15px;
}
.tab-content.current{
display: inherit;
}
#sortable span{
display:table;
margin:0 auto;
margin-top: 20px;
margin-bottom: 10px;
}
#sortable{
width:200px;
left:1070px;
top:-5px;
height:620px;
border-top:2px solid ghostwhite;
border-left: 2px solid ghostwhite;
position: relative;
background:#5D5D5D ;
}
ol {
margin:0 0 10px 0;
cursor:pointer;
}
li:not(:last-child) {
margin-bottom: 10px;
}
#goback{
position: absolute;
top:550px;
left:620px;
}
</style>
<script>
$(function(){
var drag = $('#dragdiv');
var drop =$('#dropdiv');
drag.draggable();
drop.droppable({
drop: function(){
drag.text('Dropped!');},
out: function(){
drag.text('No! Please! Take me back!');},
over: function(){
drag.text('Please drop me! Pls...');
}
});
var divsort=$('#fruitlist');
divsort.sortable();
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
})
$('#datepicker').datepicker();
});
function goBack(){
window.location = "http://www.javascriptpractice.pcriot.com/practiceSet5.html"
}
</script>
</head>
<body>
<h1 style="text-align:center">Themeroller</h1>
<div id="navbar"></div>
<div id='dropdiv'><span>Drop Here!</span></div>
<div id='dragdiv'><span>Drag Me!</span></div>
<div id='birthday'>
<span>Enter your birthday!</span>
<input type='text' id='datepicker'>
<input type='button' id='btn1' value='Go!' onClick=birthday()/>
</div>
<div id='tabs'>
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1">Home</li>
<li class="tab-link" data-tab="tab-2">About<li>
<li class="tab-link" data-tab="tab-3">Products</li>
<li class="tab-link" data-tab="tab-4">Tabs</li>
</ul>
<div id="tab-1" class="tab-content current">
Welcome to my best jQuery page yet!
</div>
<div id="tab-2" class="tab-content">
I really like compsci. Sometimes I go overboard.
</div>
<div id="tab-3" class="tab-content">
I also make and sell word clocks with Arduino microcontrollers!
</div>
<div id="tab-4" class="tab-content">
Tabs aren't as easy as they look.
</div>
</div>
<div id='sortable'><span>Sort me!</span>
<ol id="fruitlist">
<li>Apples</li>
<li>Bananas</li>
<li>Pineapples</li>
<li>Lemons</li>
<li>Kiwis</li>
<li>Strawberries</li>
<li>Oranges</li>
<li>Mango</li>
<li>Plums</li>
<li>Peaches</li>
<li>Apricots</li>
<li>Squash</li>
<li>Honeydew</li>
<li>Watermelons</li>
</ol>
</div>
<input id='goback' type="button" value="Go Back" onClick='goBack()'/>
</body>
</html>
Related
If i set position:absolute it stops moving and messing around page, while zooming(in/out) the page. but the location of div are automatically changing, and all the divs are mixing together in one location. any ideas? hope my question was clear. none of the solutions I found worked for me. I have this website I am making, and the div elements move around when I zoom-in and zoom-out the webpage. Here is the HTML code And screenshot:Screenshot
<style>
/* KEYFRAMES */
/* IDS */
#changepos{
position:relative;
top:-250px;
}
#readmore{
position:relative;
top:-260px;
right:380px;
text-decoration-line:none;
border-radius:20px;
}
#movetext{
position:relative;
right:395px;
}
#wholepage{
width:500px;
margin-left:auto;
margin-right:auto;
}
#hello{
position:relative;
left:20px;
}
#hellos{
position:relative;
left:100px;
}
/* Body Visual */
input{
width:50%;
overflow:hidden;
}
main{
background-color:lightgray;
min-height: 100%;
min-width:100%;
background-size:1550px 800px;
background-repeat: no-repeat;
overflow-x:hidden;
}
body{
background-image:url('https://images.unsplash.com/photo-1523821741446-edb2b68bb7a0?ixlib=rb-1.2.1&w=1000&q=80');
min-height: 100%;
min-width:100%;
background-size:1550px 800px;
background-repeat: no-repeat;
overflow-wrap:hidden;
overflow-x:hidden;
}
/* Classes */
.typewriter {
font-family: Courier, monospace;
display: inline-block;
}
.typewriter-text {
display: inline-block;
overflow: hidden;
letter-spacing: 2px;
animation: typing 5s steps(30, end), blink .75s step-end infinite;
white-space: nowrap;
font-size: 30px;
font-weight: 700;
border-right: 4px solid orange;
box-sizing: border-box;
}
#keyframes typing {
from {
width: 0%
}
to {
width: 100%
}
}
#keyframes blink {
from, to {
border-color: transparent
}
50% {
border-color: orange;
}
}
}
.forms{
position:relative;
left:50px;
}
.lineh{
border-bottom: 4px solid lightgray;
width:1400px;
height:3px;
cursor:default;
position:relative;
border-radius:100px;
top:-11px;
}
.lines{
border-bottom: 2px solid none;
width:1000px;
height:3px;
background-image:url('https://thelogocompany.net/wp-content/uploads/2016/05/gradient.jpg');
cursor:default;
position:relative;
border-radius:100px;
top:-195px;
right:400px;
}
.line{
border-bottom: 2px solid pink;
width:1000px;
height:3px;
background-image:url('https://thelogocompany.net/wp-content/uploads/2016/05/gradient.jpg');
cursor:default;
position:relative;
border-radius:100px;
}
.movepic{
position:relative;
left:270px;
top: -200px;
right:0px;
bottom:0px;
cursor:default;
opacity:1;
transition:1s;
}
.movepic:hover{
transform:translateX(20px);
}
.joint{
font-family:monospace;
font-size:10px;
text-decoration-line:none;
text-decoration-color:none;
text-decoration:none;
color:white;
}
.transp{
position:relative;
border-style:solid;
border-radius:50px;
background-color:none;
opacity:0.6;
cursor:pointer;
border:none;
overflow:hidden;
transition:1s;
border-image-width: 5px;
}
.transp:hover{
transform:translate(30px);
opacity:1;
transform-style: preserve-3d;
}
.container{
text-align: center;
margin-top: 360px;
}
.btn{
border: 1px solid #3498db;
background: none;
padding: 10px 20px;
font-size: 20px;
font-family:monospace;
cursor: pointer;
margin: 10px;
transition: 0.8s;
position: relative;
overflow: hidden;
}
.btn1,.btn2{
color: #3498db;
}
.btn3,.btn4{
color: #fff;
}
.btn1:hover,.btn2:hover{
color: #fff;
}
.btn3:hover,.btn4:hover{
color: #3498db;
}
.btn::before{
content: "";
position: absolute;
left: 0;
width: 100%;
height: 0%;
background: #3498db;
z-index: -1;
transition: 0.8s;
}
.btn1::before,.btn3::before{
top: 0;
border-radius: 0 0 50% 50%;
}
.btn2::before,.btn4::before{
bottom: 0;
border-radius: 50% 50% 0 0;
}
.btn3::before,.btn4::before{
height: 180%;
}
.btn1:hover::before,.btn2:hover::before{
height: 180%;
}
.btn3:hover::before,.btn4:hover::before{
height: 0%;
}
</style>
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Roma's Portfolio</title>
<link rel="stylesheet" href="../sait/css/main.css">
<link rel="icon" type="image/png" href="https://bluemountmedia.com/wp-content/uploads/2020/07/BMM-favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="refresh" content="350">
<style>
.putebi{
width: 100%;
border-radius:4px;
padding:12px;
border:1px solid #d9a7c9;
box-sizing: border-box;
margin-top:6px;
margin-bottom:16px;
resize:vertical;
}
.med{
position:relative;
outline:none;
border-style:none;
opacity:0.6;
}
.med:hover{
opacity:1;
}
.soc{
animation:socebi 3s;
outline:none;
border-style:none;
}
#keyframes socebi{
from{
opacity:0;
transform:translateX(-600px);
}
to{
opacity:1;
transform:translateX(0px);
}
}
.kont{
animation: animacia 3s;
}
#keyframes animacia{
from{
opacity:0;
transform:translateX(600px);
}
to{
opacity:1;
transform:translateX(0px);
}
}
</style>
</head>
<body>
<div>
<div style="overflow-x:hidden;"id="hello" class="transp"> <h1> Roma's Portfolio</h1> </div>
</div>
<div class="lineh"></div>
<div class="wholepage">
<div style="text-align:center; text-decoration:none">
<a style="text-decoration-line:none" class="btn btn1 container" href="index.html">Main Page</a>
<a style="text-decoration-line:none" class="btn btn1 container">Contact</a>
<a style="text-decoration-line:none" class="btn btn1 container">Projects</a>
<a style="text-decoration-line:none" class="btn btn1 container">Subscribe</a> <br> <br><br>
<div class="typewriter">
<q class="typewriter-text"style="color:pink;text-align:center; font-size:xx-large; font-family:monospace;">I'm looking to expand my portfolio while I'm on top and while I'm young.</q>
</div><br><br>
<div style="cursor:default;"class="soc">
<a style="position:relative; left:640px; outline:none;border:none;text-decoration:none;" target="_blank" href="https://www.facebook.com/profile.php?id=100041975361380"><img class="med" width="50px" src="../sait/images/facebook-logo.png"> </a> <br>
<a style="position:relative; left:640px;outline:none;border:none;text-decoration:none;" target="_blank" href="https://www.instagram.com/spoiledblueberry/"><img class="med" width="50px" src="../sait/images/instagram.png"></a><br>
<a style="position:relative; left:640px;outline:none;border:none;text-decoration:none;" target="_blank" href="https://github.com/Flowder2333"><img class="med" width="50px" src="../sait/images/github.png"></a><br>
</div>
<br><br><br>
</div>
</div>
</div>
<div id="wholepage">
<div id="movetext" style="color:white; font-family:monospace; font-size:large">
<h2 style="color:#64e873;text-shadow:2px 2px" class="line kont"> Hello!</h2> <br>
<h3 class="kont" style="text-align:left; font-size:large;"> I'm Roma. A Freelance Front End Developer based in Georgia. I specialise in creating interactive experiences and functional interfaces.I have worked on a multitude of web and print-baseds projects for a range of clients providing Web Design (Illustrator,Photoshop,Kdenlive) and Development(HTML,CSS,MYSQL,Wordpress).</h3>
</div>
<div class="kont movepic"> <img style="border:4px solid lightgray;max-width:100%;border-radius:50%" width="250" height="250" src="../sait/images/face.jpg" alt="პროფილის ფოტო"></div>
<div class="changepos lines kont">
</div>
<button id="readmore" class="btn btn3 kont">Read More</button><br><br>
</div>
<div style="position:relative; top:-180px">
<form action=""style="text-align:center">
<h1 style="color:#637478; font-family:monospace; font-size:xx-large;"> Contact Me</h1>
<div class="typewriter">
<h1 class="typewriter-text" style="font-family:monospace;color:#5fbced; font-size:xx-large">Swing by for a cup of coffee, or leave me a message:</h1>
</div><br>
<label style="font-family:;"for="saxeli">Enter Username</label>
<input style="background-color:#a2ebbf;opacity:0.6;width: 400px; border-radius:4px; padding:12px; border:1px solid #d9a7c9; box-sizing:border-box; margin-top:6px; margin-bottom:16px;resize:vertical;" id="saxeli" type="text" name="saxeli"><br><br>
<label id="email">Enter Email </label>
<input style="background-color:#a2ebbf;opacity:0.6;width: 400px; border-radius:4px; padding:12px; border:1px solid #d9a7c9; box-sizing:border-box; margin-top:6px; margin-bottom:16px;resize:vertical;" id="email" type="email" name="email"><br><br>
<label for="free">Enter Text </label>
<textarea style="background-color:#a2ebbf;opacity:0.6;text-align:top;width: 400px; border-radius:4px; padding:12px; border:1px solid #d9a7c9; box-sizing:border-box; margin-top:6px; margin-bottom:16px;resize:vertical;" id="free" name="free" rows="2" cols="20"></textarea><br>
<button style="border-radius:20px"type="submit" value="submit" class="btn btn4"> დასტურ ბლიად</button>
</form>
<img style="border:3px none pink; border-radius:50%;position:relative;top:-350px;overflow:hidden;" width="350px" height="350px"src="https://img1.pnghut.com/0/14/16/VHPJfnmcLd/internet-content-management-system-technology-search-engine-optimization-web-design.jpg">
</div>
</div>
<footer>
<p style="color:black; ">All Rights Reserved</p> -->
</footer>
</body>
</html>
It seems like, there is a problem with the background image, please try background-size: cover, if this also won't work then please share some more code using any online editor
The website is not responsive, add Media Queries to make your website look nice (the way you want) on any device screen size.
I have a chat module for my website. I have a div where my messages appear, and I want it to scroll to the bottom of the div when I open the chat page. Most recent messages appear at the bottom.
Here is the HTML and CSS code am using
/CSS/
#pageMiddle_message{
margin-left:280px;
background:#FFF;
width: 700px;
height: 592px;
border-radius: 5px;
padding-bottom:0px;
position:fixed;
border: orange 2px solid;
}
#message{
width:auto;
height:100px;
}
#chat{
background:orange;
color: #fff;
}
#no_chat{
background:orange;
color: #fff;
height:42px;
line-height:0.11857143em;
}
#head_chat{
color:#fff;
line-height: 0.82857143em;
}
.sub_paneln{
text-transform:capitalize;
color: #444;
font-weight:500;
background-size: 1px 1px;
line-height: 0.82857143em;
list-style:none;
}
.my_message{
float:right;
background-color:#DFFFFB;
list-style:none;
border-radius:8px;
border: #39F 1px solid;
}
.their_message{
float:left;
background-color:#0ADEF5;
border-radius:8px;
list-style:none;
border: #06F 1px solid;
position:inherit;
}
.line_message{
color: #444;
font-weight:500;
background-size: 1px 1px;
line-height: 0.82857143em;
list-style:none;
}
.message_list{
background:#fff;
padding:2px;
height:445px;
max-height:600px;
overflow-y:auto;
position:relative;
}
.message_body{
border-radius: 5px;
height:auto;
}
#text_message{
width:670px;
margin-top:2px;
margin-left:23px;
background-color:#D2D2D2;
padding:0px;
}
/*HTML*/
<div class="message_body">
<div id="message_list" class="message_list">messagelist</div>
<div id="message" class="new_message" style="height:auto;"></div>
<div style="background:#D2D2D2; height:97px; border-radius:4px;">
<div id="text_message">
<table width="" height="">
<tr>
<th width="auto" style="float:left;">
<a href=""><img src="" width="60" height="60" style="border-radius:5px;"/>
</a></th><th style="float:left;"><textarea name="sendmessage" style="width:579px; height:55px; border:orange 2px solid; border-radius:3px;" id="sendmessage" placeholder="send message to messager></textarea></th></th></tr></table>
<div style="float:right; padding-right:4px; margin-right:15px; margin-top:-3px;">
<input name="send" type="submit" value="send message" onClick="javascript:ajax_send();">
</div>
</div>
</div>
</div>
You could, using jQuery, calculate the bottom of the div and then scroll to it:
var $div = $("message_list");
var divpos = $div.offset();
var divheight = $div.height();
var divbottom = divpos.top + divheight;
var windowheight = $(window).height();
$(window).scrollTop(divbottom - windowheight);
The variables are used to calculate the bottom of the div, and then $(window).scrollTop() scrolls to the passed position. divbottom - windowheight makes the page scroll such that the bottom of the div matches the bottom of the screen.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
So i've forked a section on another website and I've looked through all the CSS and js and tried to recreate it on my website. I've been at it for an hour and i still can't figure out what's missing.
My question is what is the easiest way to find out what CSS is controlling a certain section?
Also what is missing from the CSS in my fiddle which is the reason my version of the html looks different to the one on the website mentioned above (you will have to scroll down on the website mentioned above to reach the section i'm trying to recreate).
Here is my fiddle of where I'm at https://jsfiddle.net/hLkyLqyd/
CSS:
.grab-section{
background-color:#fff;
width:100%;
overflow:hidden;
position:relative;
}
.grab-section .holder{
width:1104px;
margin:0 auto;
overflow:hidden;
padding:83px 0 123px;
}
.grab-section h2{
text-align:center;
font-size:58px;
line-height:70px;
margin:0 0 19px;
color:#2b3e51;
}
.grab-section .intro{
display:block;
font-weight:normal;
color:#bdc3c7;
text-align:center;
margin:0 0 67px;
}
.license-list{
margin:0 0 41px;
overflow:hidden;
text-align:center;
list-style: none;
}
.license-list li{
float:left;
width:50%;
}
.license-list span{
display:block;
padding:16px 10px 18px;
background:#ecf0f1;
border-radius:0 5px 5px 0;
color:#9fa6ac;
font-size:18px;
line-height:24px;
-webkit-transition:0.3s;
-moz-transition:0.3s;
-ms-transition:0.3s;
-o-transition:0.3s;
transition:0.3s;
}
.license-list span:hover{
text-decoration:none;
cursor:pointer;
background:#f9f9f9;
}
.license-list li:first-child span{border-radius:5px 0 0 5px;}
.license-list strong{
display:block;
font-size:24px;
line-height:28px;
margin:0 0 4px;
color:#2c3e50;
font-weight:600;
-webkit-transition:0.3s;
-moz-transition:0.3s;
-ms-transition:0.3s;
-o-transition:0.3s;
transition:0.3s;
}
.license-list .active span{
box-shadow:inset 0 2px 0 0 rgba(0,0,0,0.2);
background:#1abc9c;
color:#dff3ed;
cursor:default;
}
.license-list .active span strong{color:#fff;}
.grab-section .boxes{
width:100%;
overflow:hidden;
text-align:center;
color:#bdc3c7;
}
.grab-section .box{
width:312px;
position:relative;
padding:26px 17px 39px 18px;
border:3px solid #ebedee;
border-radius:5px;
float:left;
margin:0 0 0 22px;
}
.grab-section .box.bndl:before{
position:absolute;
right:-5px;
top:20px;
content:'';
background:url(../images/sprite.png) no-repeat -180px 0;
width:65px;
height:41px;
}
.grab-section .boxes .box:first-child{margin:0;}
.grab-section .box h3{
font-size:22px;
line-height:28px;
color:#2c3e50;
margin:0 0 8px;
opacity:0.95;
}
.grab-section .box .title{
display:block;
font-weight:normal;
font-size:18px;
line-height:24px;
color:#bdc3c9;
padding:0 0 27px;
margin:0 0 20px;
border-bottom:2px solid #ecf0f1;
}
.grab-section .box .list{margin:0 0 29px;}
.grab-section .box .list strong{color:#7f8c8d;}
.grab-section .box .btn{
display:inline-block;
vertical-align:top;
width:190px;
color:#fff;
font-size:17px;
line-height:21px;
font-weight:bold;
background:#1abc9c;
border-radius:3px;
padding:11px 0 12px 0;
font-weight:500;
border-bottom: 2px solid #16a085;
}
.grab-section .box .btn:hover {
text-decoration:none;
opacity:0.8
}
.grab-section .box .btn:active {
opacity:1;
}
.grab-section .holder {
margin:0 2% !important;
}
.grab-section .intro,
.license-list{
padding:0 !important;
margin:0 !important;
}
#media screen and (max-width: 1108px){
.grab-section .intro,
.license-list{
padding:0 !important;
margin:0 !important;
}
.grab-section .holder {
margin:0 2% !important;
}
.grab-section .box{
width: 27%;
padding: 26px 1.7% 32px;
margin: 0 0 0 3%;
}
.grab-section .box .title{
padding:0 0 10px;
margin:0 0 10px;
opacity:0.9;
}
.grab-section .box.bndl:before { background:none;}
.grab-section .box .list {font-size:16px;}
.grab-section .box .list{margin:0 0 10px;}
}
#media screen and (max-width: 768px){
.grab-section .intro,
.license-list
{margin:0 0 15px;}
.grab-section .box{
float:none;
display:block;
overflow:hidden;
width:auto;
margin:0 0 30px !important;
}
.grab-section .box .title{
font-size:14px;
line-height:16px;
opacity:0.9;
}
.grab-section .box.bndl:before{top:-8px;}
.grab-section .box .bndl { display:none}
}
HTML:
<script type='text/javascript' src='http://designmodo.com/wp-includes/js/jquery/jquery.js?ver=1.11.3'></script>
<section class="grab-section" id="buy">
<div class="holder">
<h2>Ready to grab this Sweety?</h2>
<strong class="intro">These are probably the best prices ever offered.</strong>
<ul class="license-list">
<li class="active">
<span class="per-lic">
<strong>Personal License</strong>
For Personal Projects (from $39)
</span>
</li>
<li>
<span class="dev-lic">
<strong>Developers License</strong>
For Business Projects (from $149)
</span>
</li>
</ul>
<div class="boxes developer hidden">
<div class="box">
<h3>Flat UI PSD</h3>
<strong class="title">For Designers</strong>
<ul class="list">
<li><strong>Photoshop 5.5+</strong> PSD File</li>
<li><strong>Organized</strong> Layers and Folders</li>
<li><strong>Vector-Based</strong> Graphics</li>
<li><strong>Documentation</strong></li>
<li><strong>Free Fonts</strong></li>
</ul>
Buy for $149
</div>
<div class="box bndl">
<h3>Flat UI PSD & HTML</h3>
<strong class="title">For Professional Front-Enders</strong>
<ul class="list">
<li>Features from <strong>PSD&HTML</strong></li>
<li><strong>Smart Way</strong> to Use Kit</li>
<li><strong>Low Price</strong> Deal</li>
<li><strong>Documentation</strong></li>
<li><strong>Free Fonts</strong></li>
</ul>
Buy for $249
</div>
<div class="box">
<h3>Flat UI HTML</h3>
<strong class="title">For Coders</strong>
<ul class="list">
<li><strong>Bootstrap-Based</strong> Layout</li>
<li><strong>Retina Ready</strong> Icons & Graphics</li>
<li><strong>Responsive</strong> Layout</li>
<li><strong>Documentation</strong></li>
<li><strong>Free Fonts</strong></li>
</ul>
Buy for $149
</div>
</div>
<div class="boxes personal">
<div class="box">
<h3>Flat UI PSD</h3>
<strong class="title">For Designers</strong>
<ul class="list">
<li><strong>Photoshop 5.5+</strong> PSD File</li>
<li><strong>Organized</strong> Layers and Folders</li>
<li><strong>Vector Based</strong> Graphics</li>
<li><strong>Documentation</strong></li>
<li><strong>Free Fonts</strong></li>
</ul>
Buy for $39
</div>
<div class="box bndl">
<h3>Flat UI PSD & HTML</h3>
<strong class="title">For Professional Front-Enders</strong>
<ul class="list">
<li>Features from <strong>PSD&HTML</strong></li>
<li><strong>Smart Way</strong> to Use Kit</li>
<li><strong>Low Price</strong> Deal</li>
<li><strong>Documentation</strong></li>
<li><strong>Free Fonts</strong></li>
</ul>
Buy for $69
</div>
<div class="box">
<h3>Flat UI HTML</h3>
<strong class="title">For Coders</strong>
<ul class="list">
<li><strong>Bootstrap-Based</strong> Layout</li>
<li><strong>Retina Ready</strong> Icons & Graphics</li>
<li><strong>Responsive</strong> Layout</li>
<li><strong>Documentation</strong></li>
<li><strong>Free Fonts</strong></li>
</ul>
Buy for $39
</div>
</div>
</div>
</section>
<script type="text/javascript">
jQuery('.license-list li span').click(function(){
if (jQuery(this).parent().attr('class') != 'active'){
jQuery('.license-list li.active').removeClass('active');
jQuery(this).parent().addClass('active');
jQuery('.boxes.developer').slideToggle(300);
jQuery('.boxes.personal').slideToggle(300);
jQuery('.boxes.personal').before( jQuery('.boxes.developer') );
}
});
</script>
help will be appreciated
Thanks in advance
Try using the devtools of a browser such as Chrome to select the element. There should be a pane, usually on the right side, that shows you the CSS rules applied.
just right-click on the element you want to know the css or js controlling it and select Inspect Element.
FIRST EDIT
Alternatively, saving a page locally downloads all the css and js used by the page. Then, you can just copy the css styles from the downloaded folder.
I'm making a responsive menu following this guide http://demos.inspirationalpixels.com/responsive-menu/ everything's working fine when the width is less than 980px, the menu (the three dash) is showing but not opening.
What am I doing wrong? Can anyone tell me?
It's not working on my website:
Here's my HTML Code
jQuery(document).ready(function() {
jQuery('.toggle-nav').click(function(e) {
jQuery(this).toggleClass('active');
jQuery('.menu ul').toggleClass('active');
e.preventDefault();
});
});
body {
margin: 0;
padding: 0;
background-image: url("img-bg-mobile.jpg");
background-repeat: no-repeat;
font-family: open sans;
}
.toggle-nav {
display: none;
}
#media screen and (min-width: 1000px) {
nav {
height: auto;
width:auto;
margin-left:17%;
}
nav ul{
list-style: none;
margin:0px;
padding:0px;
}
nav ul li {
float: left;
margin: 2%;
}
nav ul li a{
transition:all linear 0.15s;
text-decoration: none;
font-family: open sans;
color: white;
font-size: 1.5em;
text-align: center;
}
nav ul li a:hover {
color: black;
}
nav ul li ul {
display: none;
}
nav ul li ul a {
color: #ff3c1f;
}
nav ul li:hover ul
{
display:block;
height:auto;
width: 110px;
position:absolute;
margin:0;
}
}
#media screen and (max-width: 980px) {
.menu {
position:relative;
display:inline-block;
}
.menu ul {
width:100%;
position:absolute;
top:120%;
left:0px;
padding:10px 18px;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;
background:#303030;
}
.menu ul.active {
display:none;
}
.menu ul:after {
width:0px;
height:0px;
position:absolute;
top:0%;
left:22px;
content:'';
transform:translate(0%, -100%);
border-left:7px solid transparent;
border-right:7px solid transparent;
border-bottom:7px solid #303030;
}
.menu li {
margin:5px 0px 5px 0px;
float:none;
display:block;
}
.menu a {
display:block;
}
.toggle-nav {
padding:20px;
float:left;
display:inline-block;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;
background:#303030;
text-shadow:0px 1px 0px rgba(0,0,0,0.5);
color:#777;
font-size:20px;
transition:color linear 0.15s;
}
.toggle-nav:hover, .toggle-nav.active {
text-decoration:none;
color:#66a992;
}
}
article {
clear: both;
font-family: open sans;
font-size: 1em;
}
article p {
color: white;
margin-left: 10%;
margin-right: 10%;
}
footer {
color: white;
margin-left: 10%;
margin-right: 10%;
}
.arrow {
font-size: 11px;
margin-left: 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Yoo Free Recharge App That gives talktime for trying out cool appps">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1" maximum-scale=2.0">
<title>Yoo Get Free Recharge</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- header start from here-->
<header>
<nav class="menu">
<ul class="active">
<li class=logo>
<img class=yoologo src="yoosmall.png" title="Yoo Get Free Recharge">
</li>
<li class="mainmenu">
HOME
</li>
<li class="mainmenu">
ADVERTISE
</li>
<li id="mainmenu" class="sub-menu">
WHO WE ARE<span class="arrow">▼</span>
<ul>
<li>About Us</li>
<li>Vision</li>
<li>Team</li>
</ul>
</li>
<li class="mainmenu">
PRICING
</li>
<li class="mainmenu">
CONTACT
</li>
</ul>
<a class="toggle-nav" href="#">☰</a>
</nav>
</header>
<article>
<p>Yoo Free Recharge App - Yoo is an app that gives free recharge/talktime for trying out new and cool apps you can also refer your friends and get money for that too you can get upto 125Rs. Per Friend Download Now</p>
</article>
<footer>
<div style="font-family:'open sans';" > © Yoo Infotech. All right reserved. </div>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
You left this out of your css
#media screen and (max-width: 980px) {
....
.menu ul {
width: 100%;
position: absolute;
top: 120%;
left: 0px;
padding: 10px 18px;
box-shadow: 0px 1px 1px rgba(0,0,0,0.15);
border-radius: 3px;
background: #303030;
}
...
}
You can use some framework like bootstrap or material design
http://getbootstrap.com/components/#navbar-default
http://www.getmdl.io/components/index.html#layout-section
I followed this tutorial and made my responsive header menu
Here it is
I am preparing a menu facebook style. I encode is running smoothly. But when I click the drop-down menu remains open in other userposts.
I want to get a diverse menu of each post. not associated with each other. What do I need it to be?
This is demo jsfiddle
HTML CODE:
<div class="container">
<div class="pay_ayar">
<a class="account"></a>
<div class="bubble">
<ul class="root">
<li>Link2</li>
<li>Link2</li>
<li>Link2</li>
<li>Link2</li>
<li>Link2</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="pay_ayar">
<a class="account"></a>
<div class="bubble">
<ul class="root">
<li>Link2</li>
<li>Link2</li>
<li>Link2</li>
<li>Link2</li>
<li>Link2</li>
</ul>
</div>
</div>
</div>
CSS code:
.container {
float:left;
width:500px;
height:90px;
border:1px solid #000;
margin-top:30px;
}
.pay_ayar {
float:right;
width:20px;
height:25px;
border:1px solid #000;
display:none;
}
.container:hover .pay_ayar{
display:block;
}
a.account{
position:absolute;
line-height:25px;
width:20px;
height:25px;
cursor:pointer;
display:block;
}
.bubble{
float:left;
position:relative;
width:250px;
height:200px;
padding:0px;
border:1px solid #000;
margin-top:0px;
display:none;
margin-left:-230px;
top:25px;
}
.pay_ayar.open .account {
cursor: pointer;
width: 20px;
height:25px;
display: inline-block;
border: 1px solid #AAA;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
font-weight: bold;
color: #717780;
line-height: 16px;
text-decoration: none !important;
background: white url("http://ttb.li/dump/buttons/dropdown_arrow.png") no-repeat 100% 0px;
}
.pay_ayar.open .account {
border: 1px solid #3B5998;
color: white;
background: #6D84B4 url("http://ttb.li/dump/buttons/dropdown_arrow.png") no-repeat 100% -26px;
-moz-border-radius-topleft: 2px;
-moz-border-radius-topright: 2px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 2px 2px 0px 0px;
border-radius: 2px 2px 0px 0px;
border-bottom-color: #6D84B4;
}
and Javascript code:
$(document).ready(function()
{
$(".account").click(function()
{
if($(".bubble").css('display')=='none')
{
$(".pay_ayar").addClass('open');
$(".bubble").css('display','block');
}
else
{
$(".bubble").css('display','none');
$(".pay_ayar").removeClass('open');
}
});
$(document).click(function(e)
{
if($(e.target).attr('class')!='account')
{
if($(".bubble").css('display')=='block')
{
if($('.pay_ayar').hasClass('open'))
{
$('.pay_ayar').removeClass('open');
}
$(".bubble").css('display','none');
}
}
});
});
You have to get the current user target. You can get this with the user click event:
http://jsfiddle.net/pu7NQ/13/
$(".account").click(function(event)
{
var $container = $(event.target).closest(".container");
if($(".bubble", $container).css('display')=='none')
{
$(".pay_ayar", $container).addClass('open');
$(".bubble", $container).css('display','block');
}
else
{
$(".bubble", $container).css('display','none');
$(".pay_ayar", $container).removeClass('open');
}
});
This sure could be more elegant, but you get the idea.
If you want to close one element, on click outside, you will have to add a event listener to the document and listen, if the event was outside of the desired element. There is a plugin for that: http://benalman.com/projects/jquery-outside-events-plugin/
// add close listener
$container.on("clickoutside.outside",function(){
$(".pay_ayar").removeClass("open");
$(".bubble").hide();
$(this).off("clickoutside.outside");
});
Demo: http://jsfiddle.net/pu7NQ/16/
You should really consider, adding a close/open function to get rid of the code duplication.