Lavalamp Menu Not Working - javascript

I'm working on a tumblr theme for my blog. I want to implement lavalamp into my menu, but I've tried so many different things & can't seem to get it to work. I'm not an expert at jquery, so I'd really appreciate some help!!!
My blog is http://jamescharless.tumblr.com If you want to see it live.
<script type="text/javascript" src="http://static.tumblr.com/ww0u3rz/pREn35wbh/jquery.easing.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/ww0u3rz/I0Xn35wl8/jquery.lavalamp.min.js"></script>
<script src="http://static.tumblr.com/ww0u3rz/H7un35wai/jquery-1.1.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(function() {
$("#lava").lavaLamp({
fx: "backout",
speed: 700,
click: function(event, menuItem) {
return true;
}
});
});
});
</script>
And the CSS:
ul.navigation {
position: relative;
overflow: hidden;
list-style-type: none;
margin: 0;
padding: 0;
}
ul.navigation li {
float: left;
list-style: none;
position: relative;
}
ul.navigation li.back {
border: 1px solid #000;
background-color: #e6e8ea;
width: 9px;
height: 30px;
z-index: 8;
position: absolute;
}
ul.navigation li a {
font-size: 11px;
text-transform: uppercase;
font-weight: 700;
font-family: "Montserrat";
color: #999;
outline: none;
text-align: center;
top: 7px;
text-transform: uppercase;
letter-spacing: 0;
z-index: 10;
display: block;
float: left;
height: 30px;
position: relative;
overflow: hidden;
margin: auto 10px;
}
ul.navigation li a:hover,
ul.navigation li a:active,
ul.navigation li a:visited {
border: none;
}
And finally, the HTML:
<ul class="navigation" id="lava">
<li>home</li>
<li>message</li>
<li>archives</li>
<li>faq</li>
</ul>

Edit
Actually try this
jQuery:
$(".navigation").lavaLamp({
// etc
HTML
<nav id="navigation">
<ul class="navigation">
<li>home</li>
<li>message</li>
<li>archives</li>
<li>faq</li>
</ul>
</nav>
This may require an update to your css too.

Is this what the result should look like?
http://jsfiddle.net/lharby/Aee9W/
I am calling jquery first, then the other plugins as they are dependent on jquery.
<script src="http://static.tumblr.com/ww0u3rz/H7un35wai/jquery-1.1.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://static.tumblr.com/ww0u3rz/pREn35wbh/jquery.easing.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/ww0u3rz/I0Xn35wl8/jquery.lavalamp.min.js"></script>

Related

How to hide element and show by clicking with jquery?

Hi how can i make element subtopics show and hide on click? i also want my subtopics hide when i clicked other menus or anywhere in web page thank you.
$(document).ready(function () {
$("#mainTopics").click(function (e) {
e.preventDefault();
$("#subTopics").toggle()
});
$("html").click(function (e) {
$("#subTopics").hide();
})
});
body
{
margin: 0;
}
li, a{
text-decoration: none;
list-style-type: none;
text-decoration-line: none;
color: black;
}
/*main-menu*/
#main-menu {
position: relative;
}
#main-menu ul {
margin: 0;
padding: 0;
}
#main-menu li {
display: inline-block;
}
#main-menu a {
display: block;
width: 100px;
padding: 10px;
border: 1px solid;
text-align: center;
}
/*sub-topics*/
#subTopics {
position: absolute;
display: none;
margin-top: 10px;
width: 100%;
left: 0;
}
#subTopics ul {
margin: 0;
padding: 0;
}
#subTopics li {
display: block;
}
#subTopics a {
text-align: left;
}
/*columns*/
#column1, #column2, #column3 {
position: relative;
float: left;
left: 125px;
margin: 0px 5px 0px 0px;
}
/*hover underline*/
#main-menu li:hover {
text-decoration: underline;
}
Html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<header>
</header>
<nav>
<div id="main-menu">
<ul>
<li>Logo</li>
<li>Home</li>
<li>Topics
<div id="subTopics">
<div id="column1" class="columns">
<ul>
<li>example1</li>
<li>example2</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</nav>
<script src="jquery.js"></script>
<script src="index.js"></script>
<script>
</script>
</body>
</html>
Hi how can i make element subtopics show and hide on click? i also want my subtopics hide when i clicked other menus or anywhere in web page thank you.
Use toggle method to change from show to hide and vice versa.Also note the usage of preventDefault to prevent the default behavior of the anchor tag.
To hide the subTopics on clicking anywhere ,check for the visibility of the element then use the same toggle function.
Also note in this case the use of preventDefault along with stopPropagation
$(document).ready(function() {
$("#mainTopics").click(function(e) {
e.preventDefault();
e.stopPropagation();
$("#subTopics").toggle();
});
$('body').on('click', function() {
if ($("#subTopics").is(':visible')) {
$("#subTopics").toggle();
}
})
});
body {
margin: 0;
}
li,
a {
text-decoration: none;
list-style-type: none;
text-decoration-line: none;
color: black;
}
/*main-menu*/
#main-menu {
position: relative;
}
#main-menu ul {
margin: 0;
padding: 0;
}
#main-menu li {
display: inline-block;
}
#main-menu a {
display: block;
width: 100px;
padding: 10px;
border: 1px solid;
text-align: center;
}
/*sub-topics*/
#subTopics {
position: absolute;
display: none;
margin-top: 10px;
width: 100%;
left: 0;
}
#subTopics ul {
margin: 0;
padding: 0;
}
#subTopics li {
display: block;
}
#subTopics a {
text-align: left;
}
/*columns*/
#column1,
#column2,
#column3 {
position: relative;
float: left;
left: 125px;
margin: 0px 5px 0px 0px;
}
/*hover underline*/
#main-menu li:hover {
text-decoration: underline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
</header>
<nav>
<div id="main-menu">
<ul>
<li>Logo</li>
<li>Home</li>
<li>Topics
<div id="subTopics">
<div id="column1" class="columns">
<ul>
<li>example1</li>
<li>example2</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</nav>
Also Alternativetly you can use jquery .hide() and .show() methods
Jquery hide Show

Sidebar Menu with jQuery

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`

How to replace a button's text with a list item text using jQuery?

I'd like the text on my "Main" button to be replaced by a list 'Item' text that is clicked on within the dropdown menu. The jQuery code I used isn't working. I've tried other alternatives but they're not working either. Is there any way I can fix this? Sorry for the bother
You have several selectors wrong.
Change this:
$(function(){
$(".dropdown-menu a").click(function(){
$(".dropbtn:first-child").text($(this).text());
$(".dropbtn:first-child").val($(this).text());
});
});
To this:
$(function() {
$(".dropdown-content a").click(function() {
$('#mainspan').text($(this).text());
$(".dropdown-content").toggle();
});
});
Code Snippet:
/* Main menu drops on click */
$(document).ready(function() {
$(".dropbtn").click(function() {
$(this).toggleClass('active');
$(".dropdown-content").toggle();
});
});
/* Code to replace button's text */
$(function() {
$(".dropdown-content a").click(function() {
$('#mainspan').text($(this).text());
$(".dropdown-content").toggle();
});
});
.dropdown-main {
position: relative;
display: inline-block;
}
.dropbtn {
width: 115px;
height: 28px;
border: solid 1px #cebbb1;
background-color: white;
color: #897f63;
margin-left: -5px;
position: relative;
cursor: pointer;
}
.dropbtn.active {
border: solid 1px #0093dc;
color: #0093dc;
}
#mainspan {
font-weight: bold;
position: absolute;
padding-left: 7px;
padding-top: 4px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
z-index: 1;
border: solid 1px #cebbb1;
width: 170px;
margin-left: -5px;
}
.dropdown-content a {
padding: 1px 14px;
display: block;
color: #897f63;
text-decoration: none;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
text-decoration: none;
color: #897f63;
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="TEXTREPLACE.css">
</head>
<body>
<div class="dropdown-main">
<div class="dropbtn">
<span id="mainspan">Main</span>
</div>
<div class="dropdown-content">
Item 1
Item 2
Item 3
</div>
</div>
<script type='text/javascript' src="TEXTREPLACE.js"></script>
</body>
</html>

Why is my scroll bar doing the opposite of what I want?

Alright, so here's what I'm trying to do. I have a dashboard with a list of items (Dashboard 1, Dashboard 2,..., etc.). I'm trying to make them each have a dropdown bar come down whenever I click on one of them. Here's what I got:
Here is a.html
<html>
<head>
<title>Database</title>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<link rel="stylesheet" type="text/css" href="dashboard.css"/>
<script src="scripts/jquery-1.12.0.min.js"></script>
<script src="scripts/general.js"></script>
</head>
<body>
<div id="header">
<div class="logo">
<img src="/images/whatever.png"/>
</div>
</div>
<div id="container">
<div class="sidebar">
<ul id="nav">
<li><a class=selected href="#">Dashboard</a></li>
<li>Dashboard 1</li>
<li>Dashboard 2</li>
<li>Dashboard 3</li>
<li>Dashboard 4</li>
</ul>
</div>
<div class="content">
some content yay
<div id="box">
<div class="box-top">News</div>
<div class="box-panel"> This is simple news lalal</div>
</div>
</div>
</div>
</body>
</html>
Here is dashboard.css (note, styles.css isn't really important in this and is mainly meant for different pages, so I'm not including it):
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div#dbheader {
width: 100%;
height: 50px;
background-color: #010101;
margin: 0 auto;
}
.logo a {
margin-left: 5px;
}
div#container {
width: 100%;
margin: 0 auto;
}
.sidebar {
width: 250px;
height: 100%;
background-color: #171717;
float: left;
}
.content {
width: auto;
height: 100%;
margin-left: 250px;
background-color: #222;
padding: 15px;
}
ul#nav li{
}
ul#nav li a{
text-decoration: none;
color: #aaa;
display: block;
padding: 10px;
font-size: 0.8em;
border-bottom: 1px solid;
border-color: #111;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
ul#nav li a:hover,
ul#nav li a:active{
background-color:#030303;
color: #fff;
padding-left: 20px;
/* margin-left: 5px;*/
}
ul#nav li a.selected {
background-color: #030303;
color: #fff;
}
div#box {
margin-top: 15px;
}
div#box .box-top {
color: #fff;
text-shadow: 0px 0px 1px #000;
padding: 5px;
padding-left: 15px;
background-color: #2980b9;
font-weight: 300;
}
div#box .box-panel {
padding: 15px;
background-color: #fff;
color: #999;
}
and finally, here's my general.js file:
$(document).ready(function(){
$("ul#nav li a.selected").click(function(){
$("ul#nav li").slideToggle('fast');
});
});
What happens is that I want to click on the a.selected part of my sidebar menu, and then I want the sidebar I already have (just to see if it works) to slide down fast. What happens though is that when I click on a.selected (aka Dashboard 1), the whole sidebar retracts back into Dashboard 1 and the dashboard side bar just disappears. So it essentially did the opposite of what I wanted.
Does anyone know how I can fix this?
If I understood your intent correctly, this code should do the job:
$(document).ready(function(){
$("ul#nav li a.selected").click(function(){
$("ul#nav li:not(:first-child)").slideToggle('fast');
});
});

Creating transparent overlays for horizontal row of 3 <img>

I want to cause an overlay on mouseover for my three images. I believe it will be best to use jQuery after creating a div. However, when I add a new div to my layout (below each of the <img> in my code) My layout is screwed up; goes from horizontal list to vertical list if i try to add in any <div> below my <img>.
I mainly want the overlay just sitting there. Im sure I can figure out mouseover action, but main issue is I cannot generate initial overlay
stackoverflowers: please help me add in an overlay div that will ultimately be transparent.
home.html I have commented out my attempt at placing overlay divs
<!DOCTYPE html>
<html>
<head>
<link type = "text/css" rel="stylesheet" href="stylesheet.css"/>
<script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<title>Home Page</title>
</head>
<body>
<div class="header">
<ul id="headerMenu">
<li>
PROGRAM
<ul id="programDrop">
<li><a href='#'>INSPECTIONS</a></li>
<li><a href='#'>SOFTWARE</a></li>
<li><a href='#'>SAVINGS</a></li>
</ul>
</li>
<li>LOGIN
<ul id="loginDrop">
<li><a href='#'>TECHNICIAN LOGIN</a></li>
<li><a href='#'>CUSTOMER LOGIN</a></li>
</ul>
</li>
<li>ABOUT</li>
</ul>
</div>
<div id="midMain">
<div class="circularImg">
<img src="http://media.treehugger.com/assets/images/2011/10/ice-energy-store.jpg"/>
<!-- <div class="overlay"></div> -->
<img src="http://www.contemporist.com/photos/e4delmar.jpg"/>
<!-- <div class="overlay"></div> -->
<img src="http://www.rkmheatingandair.com/service-tech2.jpg"/>
<!-- <div class="overlay"></div> -->
</div>
</div>
</body>
</html>
stylesheet.css
body {
margin: 0;
}
.header {
background-color: white;
font-family: sans-serif;
height: 75px;
width: 100%;
display: table;
}
/* Main centered menu on top */
#headerMenu {
text-align: center;
padding: 0;
list-style: none;
display: table-cell;
vertical-align: bottom;
font-size: 1rem;
}
#headerMenu > li {
display: inline-block;
}
#headerMenu > li:nth-child(1) {
color:red;
}
#headerMenu li a {
text-decoration: none;
color: black;
margin: 2rem;
padding: 0;
}
#headerMenu li a:hover {
color: lightgray;
}
/* Sub Menu for Link One */
#programDrop {
text-decoration: none;
list-style: none;
display: block;
visibility: hidden;
padding-left: 0;
text-align: left;
position:absolute;
}
#programDrop li a{
color: black;
text-align: left;
list-style: none;
}
/* Sub Menu for Link Two */
#loginDrop {
text-decoration: none;
list-style: none;
display: block;
visibility: hidden;
padding-left: 0;
text-align: left;
position:absolute;
}
#loginDrop li a{
color: black;
text-align: left;
}
/* Photos on home page */
#midMain {
border: 1px solid red;
background-color: white;
text-align: center;
}
.circularImg {
overflow: hidden;
display: inline-block;
margin: auto;
padding: 0;
}
/* Removed code because nothing works as of yet */
.overLay {
}
/* Sets img imports as circular by default */
img {
border-radius: 50em;
min-height: 10em;
height: 18em;
width: 18em;
min-width: 10em;
margin: 3rem;
position:relative;
opacity: .5;
}
included jQuery script.js
jQuery(document).ready(function() {
$('#headerMenu > li:nth-child(1)').mouseenter(function() {
$('#programDrop').css('visibility','visible');
});
$('#headerMenu > li:nth-child(1)').mouseleave(function() {
$('#programDrop').css('visibility','hidden');
});
});
jQuery(document).ready(function() {
$('#headerMenu > li:nth-child(2)').mouseenter(function() {
$('#loginDrop').css('visibility','visible');
});
$('#headerMenu > li:nth-child(2)').mouseleave(function() {
$('#loginDrop').css('visibility','hidden');
});
});
As per comments
CSS
.overlay {
background:black;
border-radius: 50em;
min-height: 10em;
height: 18em;
width: 18em;
min-width: 10em;
margin: 3rem;
position:relative;
}
HTML
<div class="overlay"><img src="http://media.treehugger.com/assets/images/2011/10/ice-energy-store.jpg"/></div>
CODE
$(document).on("mouseover", "img", function() {
$(".overlay").css({"z-index": "999"});
$("img").css("opacity",".5");
});
Demo
http://jsfiddle.net/79zty3h7/

Categories