So I'm having the following problem.
On the snippet below you'll see parts of a larger page project I'm creating.
I've a parent DIV that has 2 main children in the form of flex:row - left and right side.
(With lots of sub-divs/classes each, that are not displayed here)
The "Products" button is an element/class that belongs in the "Left Side".
The Image (color in this snippet) is an element/class that belongs in the "Right Side".
When you click on the "Products" button, 2 other buttons appear, and then, when you hover to any of the 3 buttons, the image of the "Right Side" (color) changes accordingly.
What I want is to click on the "All Products" button, and change the image(color) of the "Right Side".
But what happens, is that it changes after I click, but the moment I move my mouse, it changes back.
This doesn't happen when I hover in any of the 3 buttons.
The image changes but it remains the same, wherever I move my mouse, as it should, unless I hover to another button.
I tried some methods but I didn't come up with any solution.
Any ideas, ladies and gentlemen?
$(document).ready(function() {
var btn_state = true
$("#main_pr_btn").on("click", function(){
if (btn_state != false){
btn_state = false;
$("#main_pr_btn").addClass("active");
$("#all_pr_btn").fadeIn(0300);
$("#recipes").fadeIn(0600);
}
else
{
btn_state = true;
$("#main_pr_btn").removeClass("active");
$("#all_pr_btn").fadeOut(0200);
$("#recipes").fadeOut(0400);
}
})
$("#main_pr_btn").hover(function(){
$(".right_side_img").css({"box-shadow": "45px 45px 150px 50px rgb(255, 255, 255)"});
$(".right_side_img").css({"background-color": "white", "background-size": "115%"});
})
$("#all_pr_btn").hover(function(){
$(".right_side_img").css({"box-shadow": "-45px 35px 100px 20px rgb(255, 255, 255)"});
$(".right_side_img").css({"background-color": "red", "background-size": "180%"});
})
$("#recipes").hover(function(){
$(".right_side_img").css({"box-shadow": "0px 0px 150px 50px #80ffcc"});
$(".right_side_img").css({"background-color": "blue", "background-size": "140%"});
})
$("#all_pr_btn").on("click", function(){
$(".right_side_img").css({"background-color": "yellow", "background-size": "140%"});
$(".left_side_first_page").find("#buttons").css({
"visibility": "hidden",
"opacity" : "0",
"transition" : "0.3s ease-in-out"
});
})
})
html {
height: 100%;
}
body {
background-image: linear-gradient(35deg, #073b0e, rgb(2, 17, 54));
font-family: "Aloevera", sans-serif;
background-repeat: no-repeat;
}
.section_1 {
height: 100%;
display: flex;
flex-direction: row;
margin: 5%;
font-family: "Didact Gothic";
}
.section_1 .parent_left_side {
flex: 50%;
display: flex;
flex-direction: column;
word-break: break-all;
justify-content: flex-start;
height: 70vh;
padding: 1vh;
}
.section_1 .parent_left_side .left_side_first_page {
background-color: transparent;
display: flex;
flex-direction: column;
word-break: break-all;
height: 70vh;
justify-content: flex-start;
}
.section_1 .parent_left_side .left_side_first_page #buttons {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-right: 20%;
transition: 0.5s ease-in-out;
z-index: 10;
}
.section_1 .parent_left_side .left_side_first_page #buttons .active button {
box-shadow: 0px 0px 10px 5px rgb(255, 255, 255);
}
.section_1 .parent_left_side .left_side_first_page #buttons #main_pr_btn button {
cursor: pointer;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 40px;
padding-right: 40px;
font-size: 25px;
font-weight: bold;
background-image: linear-gradient(180deg, #d6ee00, rgb(0, 247, 255));
color: rgb(240, 240, 240);
text-shadow: 2px 2px 2px black;
box-sizing: border-box;
border: solid 0px;
border-radius: 4px;
margin-top: 5vh;
transition: all ease-in-out 0.3s;
}
.section_1 .parent_left_side .left_side_first_page #buttons #main_pr_btn button:hover {
box-shadow: 0px 0px 10px 5px rgb(255, 255, 255);
font-size: 24.5px;
}
.section_1 .parent_left_side .left_side_first_page #buttons #all_pr_btn {
display: none;
}
.section_1 .parent_left_side .left_side_first_page #buttons #all_pr_btn button {
cursor: pointer;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 40px;
padding-right: 40px;
font-size: 25px;
font-weight: bold;
background-image: linear-gradient(180deg, #d6ee00, rgb(0, 247, 255));
color: rgb(240, 240, 240);
text-shadow: 2px 2px 2px black;
box-sizing: border-box;
border: solid 0px;
border-radius: 4px;
margin-top: 5vh;
transition: all ease-in-out 0.3s;
padding-left: 20px;
padding-right: 20px;
}
.section_1 .parent_left_side .left_side_first_page #buttons #all_pr_btn button:hover {
box-shadow: 0px 0px 10px 5px rgb(255, 255, 255);
font-size: 24.5px;
}
.section_1 .parent_left_side .left_side_first_page #buttons #recipes {
display: none;
}
.section_1 .parent_left_side .left_side_first_page #buttons #recipes button {
cursor: pointer;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 40px;
padding-right: 40px;
font-size: 25px;
font-weight: bold;
background-image: linear-gradient(180deg, #d6ee00, rgb(0, 247, 255));
color: rgb(240, 240, 240);
text-shadow: 2px 2px 2px black;
box-sizing: border-box;
border: solid 0px;
border-radius: 4px;
margin-top: 5vh;
transition: all ease-in-out 0.3s;
}
.section_1 .parent_left_side .left_side_first_page #buttons #recipes button:hover {
box-shadow: 0px 0px 10px 5px rgb(255, 255, 255);
font-size: 24.5px;
}
.section_1 .parent_left_side .left_side_second_page {
background-color: rgb(0, 71, 62);
display: none;
height: 70vh;
width: 100%;
margin-right: 20%;
margin-top: 100%;
align-self: center;
transition: 0.5s ease-in-out;
z-index: 1;
box-sizing: border-box;
border: solid 0px #ffffff;
box-shadow: inset 0px 0px 30px 10px #ffffff, 0px 0px 20px 1px rgb(255, 255, 255);
}
.section_1 .right_side {
flex: 50%;
display: flex;
flex-direction: column;
word-break: break-all;
height: 60vh;
justify-content: flex-start;
align-items: center;
padding: 1vh;
}
.section_1 .right_side .right_side_img {
background-color: white;
height: 55vh;
width: 55vh;
background-size: 115%;
background-position: center;
background-repeat: no-repeat;
box-sizing: border-box;
border-radius: 50%;
box-shadow: 45px 45px 150px 50px rgb(255, 255, 255);
transform: translate3d(0px, 0px, 0px);
transition: 0.5s ease-in-out;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Main Page</title>
<link rel="stylesheet" href="../mycss/style.css">
<link href="http://fonts.cdnfonts.com/css/aloevera" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Alegreya Sans SC' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Didact Gothic' rel='stylesheet'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="section_1">
<div class="parent_left_side">
<div class="left_side_first_page">
<div id="buttons">
<div id="main_pr_btn">
<button type="button">
Products
</button>
</div>
<div id="all_pr_btn">
<button type="button">
All Products
</button>
</div>
<div id="recipes">
<button type="button">
Recipes
</button>
</div>
</div>
</div>
<div class="left_side_second_page">
</div>
<div class="right_side">
<div class="right_side_img">
</div>
</div>
</div>
<script src="../myjs/mainpage.js"></script>
</body>
</html>
Related
I am creating a Web Browser with Electron and I need help creating a popup card. I search everywhere for something like this, but I cannot find anything.
What I need create popups that are like the provided images. Something like a chrome extension popup frame (preferably the chrome connection popup), these will be used to create connection popups, extensions popups, etc.
Chrome connection popup
Visual Studio Code editor popup
Chrome Extension popup
You would have to create a modal popup. This can be a div that is hidden by default, but shows when you click or hover over another element.
It needs to have absolute positioning and you will need to update the top and left style properties based on the event properties clientY and clientX respectivly.
const modalTooltip = document.querySelector('#modal-tooltip');
const showModal = ({ clientX, clientY }) => {
Object.assign(modalTooltip.style, { top: `${clientY}px`, left: `${clientX}px` });
modalTooltip.classList.add('tooltip-visible');
};
const hideModal = () => {
modalTooltip.classList.remove('tooltip-visible');
};
document.querySelector('.site-info').addEventListener('click', showModal);
modalTooltip.querySelector('.tooltip-close').addEventListener('click', hideModal);
body {
background: #222;
color: #DDD;
}
.demo {
display: flex;
flex-direction: row;
align-items: center;
}
.demo-help {
font-weight: bold;
margin-left: 1em;
}
.site-info {
display: flex;
justify-content: center;
align-items: center;
width: 3em;
height: 3em;
background: #666;
border: thin solid #555;
border-radius: 50%;
}
.site-info {
color: #DDD;
cursor: pointer;
}
.tooltip {
position: absolute;
top: 0;
left: 0;
z-index: 100;
display: none;
flex-direction: column;
background: #4E4C46;
color: #EEE;
border: thin solid #222;
border-radius: 0.2em;
box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.5);
font-family: 'Roboto', sans-serif;
font-size: smaller;
}
.tooltip.tooltip-visible {
display: flex;
}
.tooltip-header {
display: flex;
flex-direction: row;
margin-bottom: 0.5em;
align-items: top;
}
.tooltip-close {
cursor: pointer;
}
.tooltip-close:hover {
color: #FFF;
}
.tooltip-top, .tooltip-bottom {
display: flex;
flex-direction: column;
padding: 0.5em;
}
.tooltip-top {
flex: 1;
}
.tooltip-bottom {
border-top: thin solid #999896;
}
.tooltip-title {
color: #86CB81;
font-size: 1.25em;
flex: 1;
}
.tooltip-content {
flex: 1;
}
.tooltip a,
.tooltip a:active,
.tooltip a:hover {
color: #9CAB83;
}
.tooltip-options {
display: grid;
grid-template-columns: 1fr;
grid-row-gap: 0.667em;
}
.tooltip-options .fas {
color: #70706f;
margin-right: 0.5em;
width: 1.5em;
text-align: center;
}
.tooltip-option-flag {
color: #999896;
}
#modal-tooltip {
width: 240px;
height: 200px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100;400&display=swap" rel="stylesheet">
<div class="demo">
<div class="site-info">
<i class="fas fa-lock"></i>
</div>
<div class="demo-help">← Click Me!</div>
</div>
<div class="tooltip" id="modal-tooltip">
<div class="tooltip-top">
<div class="tooltip-header">
<div class="tooltip-title">Connection is secure</div>
<div class="fas fa-times tooltip-close"></div>
</div>
<div class="tooltip-content">
Your information (for example, passwords or credit card numbers) is private when it is sent to this site. Learn more
</div>
</div>
<div class="tooltip-bottom">
<div class="tooltip-options">
<div>
<i class="fas fa-file-invoice"></i>
Certificate
<span class="tooltip-option-flag">(Valid)</span>
</div>
<div>
<i class="fas fa-palette" aria-hidden="true"></i>
Cookies
<span class="tooltip-option-flag">(16 in use)</span>
</div>
<div>
<i class="fas fa-cog" aria-hidden="true"></i>
Site settings
</div>
</div>
</div>
here is a sample code for POP UP CARD
TEST SNIPPET CODE
save HTML code as index.html
save CSS code as style.css
note- CSS file name should be matched with what you used in html*
*i.e. link rel="stylesheet" href="style.css"
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Open Sans', sans-serif;
min-height: 100vh;
}
a,
a:link {
font-family: inherit;
text-decoration: none;
}
.container {
position: fixed;
top: 0;
left: 0;
z-index: 10;
display: none;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.container:target {
display: flex;
}
.modal {
width: 60rem;
padding: 4rem 2rem;
border-radius: .8rem;
color: hsl(0, 0%, 100%);
background: linear-gradient(to right bottom, #009FFF, #ec2F4B);
box-shadow: .4rem .4rem 2.4rem .2rem hsla(236, 50%, 50%, 0.3);
position: relative;
overflow: hidden;
}
.details {
text-align: center;
margin-bottom: 4rem;
padding-bottom: 4rem;
border-bottom: 1px solid hsla(0, 0%, 100%, .4);
}
.title {
font-size: 3.2rem;
}
.description {
margin-top: 2rem;
font-size: 1.6rem;
font-style: italic;
}
.txt {
padding: 0 4rem;
margin-bottom: 4rem;
font-size: 1.6rem;
line-height: 2;
}
.txt::before {
content: '';
position: absolute;
top: 0%;
left: 100%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 18rem;
height: 18rem;
border: 1px solid hsla(0, 0%, 100%, .2);
border-radius: 100rem;
pointer-events: none;
}
.btn {
padding: 1rem 1.6rem;
border: 1px solid hsla(0, 0%, 100%, .4);
border-radius: 100rem;
color: inherit;
background: transparent;
font-size: 1.4rem;
font-family: inherit;
letter-spacing: .2rem;
transition: .2s;
cursor: pointer;
}
.btn:hover,
.btn:focus {
border-color: hsla(0, 0%, 100%, .6);
-webkit-transform: translateY(-.2rem);
transform: translateY(-.2rem);
}
.link-1 {
font-size: 1.8rem;
color: hsl(0, 0%, 100%);
background: linear-gradient(to right bottom, #009FFF, #ec2F4B);
box-shadow: .4rem .4rem 2.4rem .2rem hsla(236, 50%, 50%, 0.3);
border-radius: 100rem;
padding: 1.4rem 3.2rem;
transition: .2s;
}
.link-1:hover,
.link-1:focus {
-webkit-transform: translateY(-.2rem);
transform: translateY(-.2rem);
box-shadow: 0 0 4.4rem .2rem hsla(236, 50%, 50%, 0.4);
}
.link-2 {
width: 4rem;
height: 4rem;
border: 1px solid hsla(0, 0%, 100%, .4);
border-radius: 100rem;
color: inherit;
font-size: 2.2rem;
position: absolute;
top: 2rem;
right: 2rem;
display: flex;
justify-content: center;
align-items: center;
transition: .2s;
}
.link-2::before {
content: '×';
-webkit-transform: translateY(-.1rem);
transform: translateY(-.1rem);
}
.link-2:hover,
.link-2:focus {
border-color: hsla(0, 0%, 100%, .6);
-webkit-transform: translateY(-.2rem);
transform: translateY(-.2rem);
}
----------
<!DOCTYPE html>
<!--code by alok shukla-->
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>pop up card</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
</head>
<body>
open pop up card
<div class="container" id="modal-opened">
<div class="modal">
<div class="details">
<h1 class="title">Your Title</h1>
<p class="description">Slogan will be here at this place.</p>
</div>
<p class="txt">some xyz some xyz some xyz some xyz some xyz some xyz some xyz some xyz some xyz
some xyz some xyz some xyz some xyz some xyz some xyz some xyz </p>
<button class="btn">Button →</button>
</div>
</div>
</body>
</html>
Help me please!
Show me please how can I remove hover effect after click close button on the right corner?
I can’t figure out how to turn off the effect when you click on the close button
Help me please. I just started to learn javascript, I would like for me to solve this problem, so that I can see how you solved it
I'm insert code snippet!
$(".close_help").click(function() {
$('.close_help').removeClass(".product__element");
setInterval(function() {
$('.product__element').addClass('.product__element')
}, 100);
});
// // $(".close-hover").click(function () {
// const resetClose = document.querySelector('.close-hover');
// $(".close-hover").click(function () {
// resetClose.style.display = 'none';
// })
// // $('.product__element').removeClass("product__element");
// // setInterval(function () { $('.product__element').addClass('product__element') }, 500);
// // });
.product__element {
z-index: 9;
background-color: #fbfbfb;
width: 20%;
margin: 2%;
padding: 10px 10px 10px 20px;
box-sizing: border-box;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
border-radius: 5px;
-webkit-transform: translateY(0);
-webkit-transition: all .2s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all .2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.prodact_sezon {
content: "";
position: absolute;
left: 0%;
top: 0%;
width: 100%;
height: 100%;
z-index: 9;
background: rgba(196, 196, 196, 0.4);
}
.close_help {
position: absolute;
top: 4px;
right: 10px;
font-size: 20px;
cursor: pointer;
}
.interact:hover .close_help {
display: block;
}
/* .prodact_sezon .product__element:hover {
transform: scale(02);
} */
.product__element:hover {
background-color: white;
transform: scale(1.02);
box-shadow: 0px 15px 40px 5px rgba(0, 0, 0, .09);
z-index: 10;
margin-bottom: 0px;
}
.elem123 {
margin-top: -1px;
margin-bottom: 0px;
display: none;
position: absolute;
box-shadow: 0 1px 12px 0 rgba(0, 0, 0, .09);
}
.product__element:hover .elem123 {
display: block;
background: #FFFFFF;
left: 0%;
right: 0%;
margin-bottom: 0%;
padding: 20px;
box-shadow: 0px 10px 12px 0 rgba(0, 0, 0, .09);
border-radius: 10px;
}
.product__img {
max-width: 80%;
height: auto;
padding-top: -20px;
}
.product__name {
width: 100%;
padding: 1px 5px 10px 5px;
text-align: center;
font-weight: bold;
}
.product__name__two {
width: 100%;
font-size: 15px;
padding: 0px 5px 7px 5px;
text-align: center;
font-weight: regular;
}
.product__description {
width: 100%;
font-size: 14px;
padding: 10px 2px 2px 2px;
text-align: center;
font-weight: regular;
text-rendering: auto;
}
.product__price {
text-align: center;
padding: 10px 5px;
/* border: 1px solid #e2e2e2; */
border-radius: 10px;
margin-bottom: 0px;
color: #edaf26;
font-weight: bold;
z-index: 330;
font-size: 17px;
}
.product__size {
display: flex;
align-items: center;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 10px;
}
.product__size-element {
width: 48%;
border: 2px solid #e2e2e2;
font-size: 14px;
padding: 5px;
text-align: center;
cursor: pointer;
box-sizing: border-box;
margin-bottom: 0px;
border-radius: 10px;
}
.product__size-element_active {
border: 3px solid #76AA6F !important;
border-radius: 10px;
}
.product__add-to-cart-button {
width: 100%;
height: 45px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border: none;
-webkit-appearance: none;
border-radius: 10px;
background: #76AA6F;
color: #fff;
cursor: pointer;
margin: 15px 0 0;
-webkit-transition: .3s;
transition: .3s;
font-size: 16px;
outline: none;
}
.product__add-to-cart-button:hover {
background: #63915D;
-webkit-transition: .3s;
transition: .3s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product__element interact">
<span class="close_help">×</span>
<img alt="Манго Махачонок" class="product__img" src="https://unsplash.com/photos/7iLlgS5o09c">
<div class="product__name">
Манго Махачонок
</div>
<div class="product__price">
<span class="product__price-number">220</span> Грн
</div>
<div class="elem123">
<div class="product__size">
<div class="product__size-element" data-sb-curent-id-or-vendor-code="003" data-sb-curent-price="220" data-sb-curent-size="1 шт.">
1 шт.
</div>
<div class="product__size-element" data-sb-curent-id-or-vendor-code="004" data-sb-curent-price="190" data-sb-curent-size="1 кг">
1 кг.
</div>
</div>
<div class="product__quantity"></div><button class="product__add-to-cart-button" data-sb-id-or-vendor-code="003" data-sb-product-img="images/shop/2-min.png" data-sb-product-name="Манго Махачонок" data-sb-product-price="220" data-sb-product-quantity="003" data-sb-product-size="1 шт."><i class="fas fa-cart-plus"></i> В корзину</button>
<div class="product__description">
По вкусовым качествам Mango Махачонок идет на первом месте среди всех тайских сортов. У него самая не волокнистая мякоть. Он самый сладкий.
</div>
</div>
</div>
While mentioning the class in any of these functions(addClass() or removeClass()) you do not start it with . because these functions are all about classes and you just need to specify them.
And to turn off the hover, change your jQuery code to
$(".close_help").click(function() {
$('div').removeClass("product__element");
setInterval(function() {
$('div').addClass('product__element')
}, 1000);
});
Here is the working example of how it works.
So I made a pretty simple function that causes a dropdown-menu to show up. It worked fine on my PC but not on my mobile devices. When I click the element which should show the dropdown menu, the dropd. menu doesn't show up. Actually nothing happens.
After some debugging it seems that this loop makes some trouble:
for (i=0;i <= faecher.length;i++) {$(id(faecher[i])).html(faecher[i]+" ▼");}
Here a snippet:
function getMouseX() {
return (event.clientX + document.body.scrollLeft);
}
function getMouseY() {
return (event.clientY + document.body.scrollTop);
}
// Position of an element relative to left --> x coordinate
function getLiX(element) {
var pos = $(element).position();
return pos.left;
}
// Position of an element relative to top --> y coordinate
function getLiY(element) {
return $(element).height();
}
// Just a name list for my elements
var faecher = ["physik", "mathematik", "chemie", "latein", "info", "profil"];
// Sets a # before an element name
function id(id) {
return "#" + id;
}
// The main dropdown function
function dd(ex) {
var jId = id(ex);
document.getElementById("agenda").innerHTML = "1";
for (i = 0; i <= faecher.length; i++) {
$(id(faecher[i])).html(faecher[i] + " ▼");
}
document.getElementById("agenda").innerHTML = "2";
$(jId).html(ex + " ▲");
document.getElementById("agenda").innerHTML = "3";
for (i = 0; i <= faecher.length; i++) {
$(id(faecher[i])).css({
"background": "none",
"color": "#ffffff"
});
}
document.getElementById("agenda").innerHTML = "4";
$(jId + "DD").css('position', 'absolute');
document.getElementById("agenda").innerHTML = "5";
$(jId + "DD").css('top', getLiY(jId));
document.getElementById("agenda").innerHTML = "6";
$(jId + "DD").css('left', getLiX(jId));
document.getElementById("agenda").innerHTML = "7";
if ($(jId + "DD").css("display") != "none") {
$(jId).css({
"background": "none",
"color": "#ffffff"
});
$(jId).html(ex + " ▼");
} else {
$(jId).css({
"background": "rgba(255, 255, 255, 0.97)",
"color": "#000000"
});
for (i = 0; i <= faecher.length; i++) {
$(id(faecher[i] + "DD")).slideUp(250);
}
}
document.getElementById("agenda").innerHTML = "8";
$(jId + "DD").outerWidth($(jId).outerWidth());
document.getElementById("agenda").innerHTML = "9";
$(jId + "DD").slideToggle(500);
document.getElementById("agenda").innerHTML = "10";
}
function physikClick() {
document.getElementById("agenda").innerHTML = "Click";
dd("physik");
} // .innerHTML just for debugging
function mathematikClick() {
dd("mathematik");
}
function chemieClick() {
dd("chemie");
}
function lateinClick() {
dd("latein");
}
function infoClick() {
dd("info");
}
function profilClick() {
dd("profil")
}
#font-face {
font-family: "aspace";
src: local("../media/font/aspace.otf"), url("../media/font/aspace.otf") format("OpenType")
}
#font-face {
font-family: "Nero";
src: local("../media/font/nero.otf"), url("../media/font/nero.otf") format("OpenType")
}
#font-face {
font-family: "MOONBEAM";
src: local("../media/font/moonbeam.ttf"), url("../media/font/moonbeam.ttf") format("TrueType")
}
#font-face {
font-family: "GOOD TIMES";
src: local("../media/font/goodtimes.ttf"), url("../media/font/goodtimes.ttf") format("TrueType")
}
#font-face {
font-family: "Induction";
src: local("../media/font/induction.ttf"), url("../media/font/induction.ttf") format("TrueType")
}
#font-face {
font-family: "Ethnocentric";
src: local("../media/font/ethnocentric.ttf"), url("../media/font/ethnocentric.ttf") format("TrueType")
}
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: auto;
}
body {
background-size: cover;
overflow: auto;
background-repeat: repeat-x;
font-family: Arial, Helvetica;
text-align: justify;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #335588;
/*background-image:url(../media/img/wa3.jpg),url(../media/img/wa2.jpg),url(../media/img/wa1.jpg),url(../media/img/wa4.jpg),url(../media/img/wa5.jpg);*/
}
h1 {
color: #FFFFFF;
font-family: "NEON CLUB MUSIC", "aspace", "MOONBEAM";
text-align: center;
}
h2,
h3,
h4,
h5,
h6 {
color: #FFFFFF;
font-family: "GOOD TIMES", "aspace", "MOONBEAM";
text-align: center;
letter-spacing: 2em;
}
a {
text-decoration: none;
color: #ffffff;
}
button,
input[type=submit],
input[type=reset] {
outline: none;
text-align: center;
padding-top: 5px;
font-family: "Good Times";
font-size: 17px;
transition: all 0.4s;
-webkit-transition: all 0.4s;
background: rgba(0, 0, 0, .6);
border: 1px solid rgba(255, 255, 255, 0.5);
color: #ffffff;
border-radius: 0.2em;
-webkit-border-radius: 0.2em;
-moz-border-radius: 0.2em;
box-shadow: .05em .05em .3em #ffffff;
text-shadow: 0.1em 0.1em 0.3em rgba(255, 255, 255, 0.5)
}
button:hover,
input[type=submit]:hover,
input[type=reset]:hover {
background: rgba(255, 255, 255, 1);
color: rgba(0, 0, 0, 1);
border-radius: 0.3em;
-webkit-border-radius: 0.3em;
-moz-border-radius: 0.3em;
box-shadow: .25em .25em .5em #eeeeee;
cursor: pointer;
text-shadow: 0.1em 0.1em 0.3em rgba(0, 0, 0, 1);
}
input[type=button] {
width: 25px;
height: 25px;
outline: none;
transition: all 0.4s;
-webkit-transition: all 0.4s;
background: rgba(0, 0, 0, .6);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
box-shadow: .05em .05em .3em #ffffff;
}
input[type=button]:hover {
width: 30px;
height: 30px;
background: rgba(255, 255, 255, 1);
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
box-shadow: .25em .25em .5em #eeeeee;
cursor: pointer;
}
input[type=password],
input[type=file],
select,
option,
input[type=text],
input[type=search],
input[type=date],
input[type=number],
input[type=email],
textarea {
transition: all 0.5s;
-webkit-transition: all 0.5s;
outline: none;
background: rgba(0, 0, 0, 0.7);
border: 1px solid rgba(255, 255, 255, 0.7);
color: #ffffff;
padding: 2px;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}
input[type=password]:focus,
input[type=file]:focus,
select:focus,
option:focus,
input[type=text]:focus,
input[type=date]:focus,
input[type=search]:focus,
input[type=number]:focus,
input[type=email]:focus,
textarea:focus {
border: 1px solid #ffffff;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
input[type=password]::-webkit-input-placeholder,
input[type=file]::-webkit-input-placeholder,
select::-webkit-input-placeholder,
option::-webkit-input-placeholder,
input[type=text]::-webkit-input-placeholder,
input[type=date]::-webkit-input-placeholder,
input[type=number]::-webkit-input-placeholder,
input[type=email]::-webkit-input-placeholder,
input[type=search]::-webkit-input-placeholder {
color: rgba(50, 50, 50, 0.9);
text-shadow: none;
-webkit-text-fill-color: initial;
}
option: {
background: #ffffff;
color: rgba(0, 0, 0, .6)
}
table {
border-spacing: 0.5em;
display: table;
border-collapse: collapse;
border-color: #ffffff;
padding: 0.3em;
empty-cells: hide;
table-layout: auto;
width: 100%;
overflow: auto;
font-weight: normal;
text-align: left;
}
table th,
table td {
border: 1px solid #ffffff;
padding: 0.3em;
height: 1em;
overflow: auto;
font-weight: normal;
}
table .alt td {} #title {
position: relative;
text-align: center;
z-index: 5;
margin-top: 4em;
background: transparent;
}
#menubar {
left: 0;
right: 0;
position: fixed;
background: rgba(0, 0, 0, .8);
z-index: 10;
top: 0;
height: 3em;
vertical-align: middle;
line-height: 3em;
overflow: auto;
box-shadow: 0 .1em .9em #000000;
}
.mb {
margin: 0;
list-style-type: none;
font-family: "Good Times", "Arial";
vertical-align: middle;
}
.mb li {
display: inline;
-webkit-transition: all 0.7s;
transition: all 0.7s;
height: 100%;
padding-left: 1em;
padding-right: 1em;
float: left;
vertical-align: middle;
}
.mb li:hover {
background: rgba(255, 255, 255, 0.97) !important;
color: #000000 !important;
}
.dropdown {
z-index: 11;
/*border-radius:0.2em;
-webkit-border-radius:0.2em;
-moz-border-radius:0.2em;*/
background: rgba(255, 255, 255, 0.92);
display: none;
padding: 0.2em;
padding-left: 0.3em;
padding-top: 0.3em;
font-size: 1.2em;
background-clip: border-box;
text-align: left;
overflow: auto;
}
.dropdown a {
background-clip: border-box;
padding: 0 0;
}
.dropdown a:hover {
/*text-shadow: 0.5em 0.5em 1em #000000;*/
/*font-size:1.05em;*/
font-weight: bold;
}
#profil {
float: right;
}
.prlxcntr {
position: absolute;
top: 0;
margin: 0;
padding: 0;
}
#main {
background: rgba(0, 0, 0, 0);
color: #ffffff;
padding: 1px;
position: relative;
display: block;
border-top: 1px solid #ffffff;
width: 100%;
left: 0;
right: 0;
text-align: center;
margin: 0 auto;
z-index: 5;
}
#main h2 {
color: #ffffff;
font-family: "GOOD TIMES";
}
.text {
text-align: justify;
padding: 1em;
font-size: 1.3em;
}
#footer {
bottom: 0;
position: fixed;
background: rgba(0, 0, 0, .8);
left: 0;
right: 0;
text-align: center;
color: #ffffff;
padding: 0.2em;
overflow: auto;
z-index: 10;
}
.ddp {
color: rgba(0, 0, 0, 1);
}
.mainNav {
overflow: auto;
width: 98%;
}
.mainNav ul {
list-style-type: none;
}
.mainNav ul li {
display: inline;
transition: all 0.0s;
-webkit-transition: all 0.0s;
}
.mainNav ul li:hover {
display: inline;
border-bottom: 1px solid #ffffff;
cursor: pointer;
}
.div[id^="woerterliste"] {
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
width: 100%;
background: red;
}
#menubar2 {
left: 0;
right: 0;
position: fixed;
background: rgba(255, 255, 255, .8);
z-index: 9;
top: 3em;
height: 3em;
vertical-align: middle;
line-height: 3em;
overflow: auto;
color: #000000;
box-shadow: 0 .1em .9em #000000;
}
.mb2 {
margin: 0;
list-style-type: none;
font-family: "Good Times", "Arial";
vertical-align: middle;
color: #000000;
}
.mb2 li {
display: inline;
-webkit-transition: all 0.7s;
transition: all 0.7s;
height: 100%;
float: left;
padding-left: 1em;
padding-right: 1em;
vertical-align: middle;
color: #000000;
}
.mb2 li:hover {
cursor: pointer;
background: rgba(0, 0, 0, 0.97) !important;
color: #ffffff !important;
}
.ueberschrift {
font-family: Ethnocentric;
text-shadow: .1em .1em .5em #000000;
}
<!DOCTYPE html>
<html lang="ch_DE">
<head>
<title>My Site</title>
<meta charset="UTF-16" />
<!--<link href="css/bootstrap.min.css" rel="stylesheet">-->
<link rel="stylesheet" type="text/css" href="css/universal.css"></link>
<link rel="stylesheet" type="text/css" href="css/idsAndClasses.css"></link>
<link rel="icon" href="media/img/logo.png" type="image/x-icon"></link>
<!--<script src="js/bootstrap.min.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/scrollmagic/minified/ScrollMagic.min.js"></script>
<script type='text/javascript' src='js/jquery.marquee.min.js'></script>
<script src="js/bitballoon.js"></script>
<script src="js/forms.js"></script>
<script src="js/client.js"></script>
<script src="js/functions.js"></script>
<!--<script src="js/styleManagement.js"></script>-->
<script src="js/clientManagement.js"></script>
<script src="js/parallax.js"></script>
<script>
$(document).on('beforeunload', function() {
$(document).scrollTop(0);
});
</script>
</head>
<body background="media/img/wa2.jpg" onload="scrollToTop()">
<!--<div class="prlxcntr" data-parallax="scroll" data-position="top" data-bleed="10" data-image-src="media/img/doubleNebula.jpg" data-natural-width="1400" data-natural-height="900">-->
<!-- http://i.imgur.com/kJiOdp8.jpg -->
<nav id="menubar">
<ul class="mb">
<a href="index.html" title="Home">
<li id="home">Home
</li>
</a>
<a href="#physik" onclick="physikClick()" title="Physik">
<li id="physik">Physik ▼
</li>
</a>
<a href="#mathematik" onclick="mathematikClick()" title="Mathematik">
<li id="mathematik">Mathematik ▼
</li>
</a>
<a href="#chemie" onclick="chemieClick()" title="Chemie">
<li id="chemie">Chemie ▼
</li>
</a>
<a href="#latein" onclick="lateinClick()" title="Latein">
<li id="latein">Latein ▼
</li>
</a>
<a href="#info" onclick="infoClick()" title="Info">
<li id="info">Info ▼
</li>
</a>
<a href="#profil" onclick="profilClick()" title="Profil">
<li id="profil">Profil ▼
</li>
</a>
</ul>
</nav>
<div class="parallax-window" id="title">
<h1 style="letter-spacing: 2em;" title='"Insert Easter Egg here."'>My Site</h1>
</div>
<!-- DROP DOWN DIV CONTAINERS -->
<div id="physikDD" class="dropdown"><a class="ddp" href="doc/physik/startseite.html">Theorie
</a>
<br /><a class="ddp" href="#formellehre">Formellehre
</a>
<br /><a class="ddp" href="#uebungen">Übungen
</a>
</div>
<div id="mathematikDD" class="dropdown"><a class="ddp" href="#theorie">Theorie
</a>
<br /><a class="ddp" href="#formellehre">Formellehre
</a>
<br /><a class="ddp" href="#uebungen">Übungen
</a>
</div>
<div id="chemieDD" class="dropdown"><a class="ddp" href="#theorie">Theorie
</a>
<br /><a class="ddp" href="#uebungen">Übungen
</a>
</div>
<div id="infoDD" class="dropdown"><a class="ddp" href="#agenda">Agenda
</a>
<br /><a class="ddp" href="doc/info/kontakt.html">Kontakt
</a>
<br /><a class="ddp" href="#ueber">Über
</a>
</div>
<div id="lateinDD" class="dropdown"><a class="ddp" href="#grammatik">Grammatik
</a>
<br /><a class="ddp" href="doc/latein/woerter.html">Wörter
</a>
</div>
<div id="profilDD" class="dropdown">
<!--<span id="profilName" style="color:white;text-decoration:underline;">Profil:</span><br />
Anmelden<br />Registrieren
--><b style="color: #ff7777;">IN ARBEIT</b>
</div>
<!-- MAIN DIV CONTAINER -->
<section class="text">
<h4 id="agenda">Debug Text</h4>
</section>
<!-- FOOTER DIV CONTAINER -->
<!--</div>-->
</body>
</html>
Do you know why this won't work with a mobile device?
I have an problem like my application well and good run in chrome but in safari browser my save & cancel buttons are not with original position or not proper alignment. My application is developed in salesforce so i need help.
I am attaching an screenshot this pages so we will helping for better understanding of problem.
In Chrome
In safari
Following html code for save and cancel
<div style="display: inline-block; float: left; margin-left:10px; width: 190px; margin-right: 0px; transition-property: margin-top; transition-duration: 500ms; position: fixed;">
<a class="save" onclick="jobsave();" >
<span >Save</span></a>
<br/><br/>
<a class="cancel-btn" href="javascript:void(0);" onclick="window.open('/apex/FieldAwareConnectorPage','_self');">Cancel</a>
</div>
Following css for save and cancel button
.cancel-btn {
display:block;
width:200px;
text-align:center;
text-decoration:none;
font-size: 14px;
font-family: tahoma;
color: #6D6D6D;
text-shadow: 0px 1px 1px #EEE;
padding:10px 0;
background-color: #1a82f7;
background: -webkit-gradient(linear, 0% 50%, 0% 50%, from(#E3DDDD), to(#fff));
background: -webkit-linear-gradient(top, #E3DDDD, #fff);
background: -moz-linear-gradient(top, #E3DDDD, #fff);
background: -ms-linear-gradient(top, #E3DDDD, #fff);
background: -o-linear-gradient(top, #E3DDDD, #fff);
box-shadow:0 0 10px #E3DDDD inset;
box-shadow: 0px -3px 10px #E3DDDD inset;
}
.cancel-btn:hover {
background:none;
box-shadow:0 0 0;
text-decoration:none;
color: #6D6D6D;
}
This semantic using HTML5 tags and responsive using a grid that will scale the elements.
Here is the JSFiddle demo
Screenshot:
//HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<section id="main">
<header>
<h1>New Job</h1>
<h2>Job Summary</h2>
<hr>
</header>
<section id="widgets">
<section id="area1">
<form>
<input type="text" name="customer_location" placeholder="Customer & Location">
<input type="text" name="contact" placeholder="Contact">
<input type="text" name="asset" placeholder="Asset">
</form>
</section>
<section id="area2">
<form>
<textarea placeholder="Job Description"></textarea>
<p id="count">4096 remaining characters</p>
</form>
</section>
</section>
</section>
<aside>
<button onclick="">Save</button>
<button onclick="">Cancel</button>
</aside>
</body>
</html>
//CSS
h1,h2,h3,h4,h5,h6,p{
-webkit-font-smoothing: antialiased;
font-family: HelveticaNeue-Light,"Helevetica Neue",Helvetica,Arial;
}
body{
margin: 0;
height: 100vh;
width: 100vw;
display: -webkit-flex;
display: flex;
}
#main{
display: -webkit-flex;
display: flex;
-webkit-flex: 80;
flex: 80;
padding: 3em;
-webkit-flex-direction: column;
flex-direction: column;
}
h1{
color: #fff;
padding-left: 1em;
font-size: 3em;
background: #31D2D2;
}
h2{
color: #7C7C7C;
}
#widgets{
display: -webkit-flex;
display: flex;
-webkit-flex: 1;
flex: 1;
}
#area1{
display: -webkit-flex;
display: flex;
-webkit-flex: 20;
flex: 20;
padding: 1em;
-webkit-flex-direction: column;
flex-direction: column;
}
#area2{
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
padding: 1em;
-webkit-flex: 80;
flex: 80;
}
form{
cursor: default !important;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
background: #ECF0F1;
-webkit-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40);
box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40);
-webkit-border-radius: 0.3em;
border-radius: 0.3em;
padding: 1.3em;
}
form>input{
height: 2.5em;
margin: 0.2em 0;
font-size: 1em;
-webkit-font-smoothing: antialiased;
font-family: HelveticaNeue-Light,"Helevetica Neue",Helvetica,Arial;
text-align: center;
border: 1px solid #d5dadc;
-webkit-border-radius: 2px;
border-radius: 2px;
color: #7C7C7C;
outline: none;
}
button{
height: 2.5em;
margin: .5em 1em;
padding: 0;
font-size: 1em;
-webkit-font-smoothing: antialiased;
font-family: HelveticaNeue-Light,"Helevetica Neue",Helvetica,Arial;
cursor: pointer;
outline: none;
border: none;
color: #fff;
border-radius: 2px;
-webkit-border-radius: 2px;
}
aside>button:nth-of-type(1){
background: #2ECC71;
}
aside>button:nth-of-type(2){
background: #7C7C7C;
}
aside>button:nth-of-type(1):hover{
background: #40D47E;
}
aside>button:nth-of-type(2):hover{
background: #9A9999;
}
button:active{
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
textarea{
height: 10em;
max-width: 100%;
border: 1px solid #d5dadc;
-webkit-border-radius: 2px;
border-radius: 2px;
color: #7C7C7C;
outline: none;
font-size: 1em;
-webkit-font-smoothing: antialiased;
font-family: HelveticaNeue-Light,"Helevetica Neue",Helvetica,Arial;
}
#count{
font-style: italic;
color: #ccc;
}
aside{
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-justify-content: flex-end;
justify-content: flex-end;
-webkit-flex: 20;
flex: 20;
z-index: 999;
-webkit-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40);
box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40);
background: #ECF0F1;
}
help me out here. I want to have my navigation menu go to a fixed position at the top after i scroll down 500 pixels. If anyone can give me the java-script I need, I will be very grateful. Thanks in advance :)
Here is the code if it would help
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" type="image/png" href="img/favicon.png" />
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<style>
body {
margin: 0;
font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
padding: 0;
width: 100%;
font-size: 18px;
}
a {
text-decoration: none;
}
h1 {
}
h2 {
}
hr {
border: 0;
height: 1px;
background: #333;
background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);
background-image: -moz-linear-gradient(left, #ccc, #333, #ccc);
background-image: -ms-linear-gradient(left, #ccc, #333, #ccc);
background-image: -o-linear-gradient(left, #ccc, #333, #ccc);
}
/* ==============================Header================= */
.cover {
background: url(http://oi62.tinypic.com/a2ac8n.jpg) top center no-repeat;
background-size: cover;
width: 100%;
height: 500px;
margin-bottom: -400px;
position:fixed;
}
.menu,
.menu ul,
.menu li,
.menu a {
padding: 0;
border: none;
outline: none;
}
.menu {
text-shadow:0px 0px 10px #fff;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
margin: 400px 0px 0px 0px;
position: absolute;
width: 100%;
height: 100px;
-webkit-box-shadow: 0px 0px 20px 1px #666;
-moz-box-shadow: 0px 0px 20px 1px #666;
box-shadow: 0px 0px 20px 1px #666;
background: #FFF;
}
.menuWrap {
width: 1000px;
margin: auto;
}
.menu li {
list-style:none;
float: left;
width: 25%;
text-align: center;
}
.menu li a {
display: block;
font-weight: bold;
color: #000;
font-size: 20px;
line-height: 100px;
}
.menu li:hover > a,
.menu .active {
background-color:#09D5D5;
color: #FFF;
-webkit-transition: ease-in .2s;
-moz-transition: ease-in .2s;
-o-transition: ease-in .2s;
-ms-transition: ease-in .2s;
transition: ease-in .2s;
}
/* ========================Content======================== */
.mainContent{
background: #F8F8F8;
width: 100%;
position: absolute;
margin-top:500px;
}
.contentWrapper {
margin: auto;
width: 1000px;
padding-top: 50px;
}
.content {
margin-bottom: 50px;
padding: 40px;
border: #999 1px solid;
line-height: 25px;
color: #4D4D4D;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background-color: #FFF;
box-shadow: 0px 0px 1px 1px #e1e1e1 inset, 0px 23px 30px -33px #4D4D4D;
}
</style>
<body class="body">
<div class="cover"></div>
<header class="mainHeader">
<nav>
<ul class="menu"><div class="menuWrap">
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
<li>Page4</li>
</div></ul>
</nav>
</header>
<div class="mainContent">
<div class="contentWrapper">
<article class="content">
</article>
<article class="content">
</article>
<article class="content">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</article>
</div>
<div>
</html>
Use an additional class:
.menu.fixed {
position:fixed;
top: 0;
margin: 0;
z-index: 3;
}
and the following jQuery code to detect the scroll:
$(document).scroll(function()
{
if($(document).scrollTop()>=500)
$('.menu').addClass('fixed');
else
$('.menu').removeClass('fixed');
});
See working JSFiddle Demo