I am attempting to make a second dropdown navigation here, all i want it to do is slide down nicely once its been triggered to show and it does slide down. However it disappears just after a second or so, why does it do that??
HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<header></header>
<nav>
Toggle
</nav>
<div id="lower_nav">
This is some text.
</div>
<div></div>
<footer></footer>
</body>
</html>
SASS
*
margin: 0
header
background-color: tomato
height: 120px
nav
background-color: brown
padding: 20px
a
color: white
div
background-color: f0f0f0
#lower_nav
background-color: blue
padding: 20px
color: white
display: none
Jquery
$(function() {
$("a").on("click", function() {
$("#lower_nav").slideDown();
});
});
I realised that by clicking a link i am reloading a page, therefore my bar is disappearing. I solved this with jquery's preventDefault function.
Related
I'm trying to create a text(S) inside a rectangular box and the other one(Fox.) outside the box,
Just like this:
I tried to create it but something is wrong
Here's the code:
div {
width: 18px;
height: 72px;
padding: 10px;
border: 5px solid black;
margin: 0;
}
<html>
<head>
</head>
<body>
<div><h1>S</h1></div><p><h1>Fox.</h1>
</body>
</html>
Fixed it for you.
The problem was that you used 2 h1 next to each other.
Each h1 will automatically go to a new line.
I fixed it by using only one h1 and added a <block> where you can add the styles.
block {
width: 18px;
height: 72px;
padding: 10px;
border: 5px solid black;
margin: 0;
}
<html>
<head>
</head>
<body>
<h1>
<block>S</block> Fox.
</h1>
</body>
</html>
the basic idea is not bad! Now I will show you a solution to your problem and we will analyze all the components together.
Let's think about the structure of DIV. First you will need two divs with a reference class or reference ID and you want them to be arranged side by side.
To put them side by side you could create an additional parent div, of flexible type (called father).
We also need 2 texts. In this example I will use simple spans.
We also create a style.css file where we will store the style of our containers
So we can write this.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Link your stylesheet -->
<link rel="stylesheet" href="style.css">
<title>Title</title>
<div id="father">
<div id="sonOne"><span>S</span></div>
<div id="sonTwo"><span class="fox">FOX.</span></div>
</div>
</head>
<body>
</body>
</html>
For the style instead, we need to assign the parent a flexible orientation and line type. For the style, on the other hand, we need to assign a flexible, row-type orientation to the parent. To the first div should be put the border and to the second div, the text inside should be bold
Create style.css and try all togheter. Run this!!!
#sonTwo,#sonOne {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#sonTwo,#sonOne span {
font-size: 50px;
}
#father {
display: flex;
flex-direction: row;
}
#sonOne {
border: 2px solid black;
border-radius: 5px;
padding: 5px;
}
#sonTwo {
padding: 5px;
}
.fox {
font-weight: bold;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Link your stylesheet -->
<link rel="stylesheet" href="style.css">
<title>Title</title>
<div id="father">
<div id="sonOne"><span>S</span></div>
<div id="sonTwo"><span class="fox">FOX.</span></div>
</div>
</head>
<body>
</body>
</html>
For the S on the other hand, you could assign a font from Google Fonts that we have the borders the way you like them
Here is a jsbin link to my code. As you can see, the drop down closes as soon as I hover away from the trigger thus making the navigation useless.
Any simple solutions would be very welcome. Thanks in advance.
html
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<header>
<p>Menu</p>
<ul>
<li>list</li>
<li>list</li>
<li>list</li>
<li>list</li>
</ul>
</header>
</body>
</html>
SASS
*
margin: 0
header
padding: 20px
background-color: tomato
p
display: inline
padding: 5px 10px
background-color: blue
color: white
&:hover
cursor: pointer
ul
padding: 10px
background-color: blue
list-style: none
color: white
width: 60px
display: none
JS
$(function(){
$("p").hover(function(){
$("ul").slideToggle();
});
});
$(function(){
$("p").hover(function(){
$("ul").show();
});
$("ul").hover(function(){}, function(){
$(this).hide();
});
});
You don't need JS for this. Use :hover in your css:
header:hover ul {
display:block;
}
http://jsfiddle.net/wfw1f9to/3/
I'm having trouble changing the background color of a div when the mouse enters the field of the div. I'm using javascript/jquery to attempt this but nothing seems to be happening. Posted is a link of the html I'm trying to access, the css, and the javascript.
Can anyone tell me why this isn't working??? I can't seem to figure it out and the other examples on here have 1000's of solutions that just do not work when I try to use them.
// THE HTML
<section class="box content">
<div id="projects"></div>
<div class="container">
<h2>Title Three</h2>
<p>content goes here</p>
<div class="someContent">
<p>more stuff change me
</p>
</div>
</div>
</section>
// THE CSS
.someContent {
width: 60%;
margin-left: 100px;
border: 2px solid black;
text-align: left;
}
.hightLight {
background-color: yellow;
border: 2px solid blue;
}
// THE JAVASCRIPT
(document).ready(function() {
$(".someContent").on("mouseenter", function() {
$(this).addClass("highLight");
}).on("mouseleave", function() {
$(this).removeClass("highLight");
});
});
// lastly the tags added at my html top
<!-- css -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<!-- js -->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/scroll.js"></script>
Why isn't the div ".someContent" not changing ? >-<
Rename your .hightLight selector in your CSS to .highLight.
And also add a $ in front of your first line of JavaScript:
$(document).ready(function() {
Though I'm a big fan of javascript, this is a use css case:
.someContent :hover {
background-color: yellow;
border: 2px solid blue;
}
can you please tell me how to add hidden div or button behind the button?Actully I need to increase the click area without increase the x image size so that user can click in whole area.?
here is my code
<!DOCTYPE html>
<html>
<head>
<link href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div data-role="page" id="wrapper">
<button id="openPopup">openPOP</button>
<div data-role="popup" data-dismissible='false' id="testCaseId" data-theme="b" data-overlay-theme="a">Close
<div data-role="fieldcontain">
<label for="testCaseIDValue">TestCase Name:</label>
<input type="text" name="testCaseIDValue" id="testCaseIDValue" value="" class="inputTextTestCase" />
</div>
Done
</div>
</div>
</body>
</html>
js Code
$(function(){
$('#openPopup').click(function(){
$( "#testCaseId" ).popup( "open" );
})
})
Use the close icon as a centered background image of a larger element.
HTML
CSS
a {
display: block;
background: url("http://icons.iconarchive.com/icons/custom-icon-design/mini/24/Close-icon.png") no-repeat center center #eee;
width: 50px;
height: 50px;
}
Demo: http://jsfiddle.net/eAxb8/
Try setting a <div> that acts as a container for the button graphic and is the same color as your background, but clickable.
For example,
<a href = "whatever.com">
<div id="hidden_button">
<div id="button_graphic">
Button Text
</div>
</div>
</a>
stylesheet.css
a {
text-decoration: none;
}
#hidden_button {
background: #ffffff;
width: 300px;
height: 300px;
}
#button_graphic {
width: 150px;
height: 150px;
border: 4px solid black;
border-radius: 5px;
color: #ffffff;
text-align: center;
background-color: #F38630;
margin: auto;
margin-top: 75px;
}
If I've done my CSS correctly, this should create a square button with rounded edges that is 150px by 150px, with a container around it that is 300px by 300px and appears invisible, but is still clickable. Adjust the sizes to meet your needs.
To me, it seems like you look for an invisible area that acts like a button.
See the following fiddle. To remove the blue color, just delete the code style="background-color:lightblue"
http://jsfiddle.net/p943a/2/
I'm programming a html5 app with JQuery Mobile and Phonegap. I want to run them on many different devices. Because of that, I want to have everything relative to screen size.
<div id="pos" data-role="content"
style="border: 5px solid silver; margin-left: auto; margin-right: auto; width: 250px; height: 250px;">
I use this div Element to display a google map inside with a little border around.
How can I adjust the size for example 80% of the screen size?
I tried it with width: 90%; height: 90%, but the result is really bad. Its not relative to screen, it lokks like relative to the content.
And the size of the border is fixed with 5px, is it possible to insert here a nice argument to have it relative to screen size?
I hope someone can help!
Thanks!
A html element, set to width: 100%, stretches to a 100% of it's parents width. You need to make sure that the containing elements widths are also 100%.
You also need to make the html and body width 100%.
An example:
html, body { width: 100%; }
#pos { width: 80%; }
This example assumes the #pos element is straight on the body.
you might need to define the height and width of the parents if you dont want to use js
here i made an example on jsfiddle
jsfiddle
looks good, so I think the problem is because of JQuery! Here is my complete code of this page:
<!DOCTYPE html>
<html>
<head>
<title> App</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.1.1.min.css" />
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery.mobile-1.1.1.min.js"></script>
<style>
html, body, geolocation { width: 100%; height: 100%; }
#pos { width: 80%; height: 80%; }
</style>
</head>
<body>
<div data-role="page" id="geolocation" data-theme="a">
<h2 align="center">Geolocation</h2>
<div data-role="header" data-position="fixed" data-theme="a">
<h1>Car Data</h1>
</div>
<div id="pos" data-role="content" style="border: 5px solid silver;">
Deine Position wird ermittelt...</div>
<script type="text/javascript" src="geolocation.js"></script>
<div data-role="footer" data-position="fixed" data-id="persFooter">
<div data-role="navbar">
<ul>
<li>Connect</li>
<li>Vehicles</li>
<li>Info</li>
</ul>
</div>
</div>
<script>
$('#geolocation').on('swipeleft',function(){
$.mobile.changePage("fuelGauge.html", { transition: "slide"});
console.log('slideLeft');
})
$('#geolocation').on('swiperight',function(){
$.mobile.changePage("batteryStatus.html", { transition: "slide", reverse: 'true'});
console.log('slideLeft');
})
</script>
</div>
</body>
</html>