The minimize & maximize Button is not working
The code is
I want to minimize & maximize this div & also how to set the height of div box.It is just as extra as height of title bar because i give height as 100%
$(function() {
$("#main").resizable();
});
$("#button").click(function() {
if ($(this).html() == "-") {
$(this).html("+");
$(this).slideUp();
} else {
$(this).html("-");
$(this).slideDown();
}
$("#box").slideToggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="main" id="main">
<div id="title_bar">
<div id="button">-</div>
</div>
<div id="box">
</div>
</div>
Try this code : I have commented two lines of your code $(this).slideUp(); and $(this).slideDown(); this lines show/hide on click of that link.
$(function () {
$("#main").resizable();
});
$("#button").click(function () {
if ($(this).html() == "-") {
$(this).html("+");
//$(this).slideUp();
} else {
$(this).html("-");
//$(this).slideDown();
}
$("#box").slideToggle();
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<body>
<div class="main" id="main">
<div id="title_bar">
<div id="button">-</div>
</div>
<div id="box" style="height:200px;border:1px red solid">
This is box
</div>
</div>
</body>
$(this).slideDown(); in the buttons function will simply slide the button, remove them and you're basically good to go!
$(function() {
$("#main").resizable();
});
$("#button").click(function() {
if ($(this).html() == "-") {
$(this).html("+");
} else {
$(this).html("-");
}
$("#box").slideToggle();
});
#button {
background: lightblue;
border: 1px solid #ccc;
}
#box {
background: coral;
border: 1px solid #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="main" id="main">
<div id="title_bar">
<div id="button">+</div>
</div>
<div id="box">
Hello World!
</div>
</div>
$(function() {
$("#main").resizable();
$("#button").click(function() {
if ($(this).html() == "-") {
$(this).html("+");
$(this).slideDown();
} else {
$(this).html("-");
$(this).slideDown();
}
$("#box").slideToggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="main" id="main">
<div id="title_bar">
<div id="button">-</div>
</div>
<div id="box">Hi
</div>
</div>
You need to have some content inside the div box, so i added a fixed height ot demonstrate the function.
And you were sliding the button div which will hide it prevent you from click on it again.
See snippet bellow on how to do it:
$(function() {
$("#main").resizable();
});
$("#button").click(function() {
if ($(this).html() == "-") {
$(this).html("+");
$("#main").css('height', 'auto');
$("#main").resizable('disable');
} else {
$(this).html("-");
$("#main").resizable('enable');
}
$("#box").slideToggle();
});
#box {
height: 100px;
}
#button {
cursor: pointer;
background: yellow;
padding: 0 5px;
}
#main {
border: 1px solid;
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="main" id="main">
<div id="title_bar">
<div id="button">-</div>
</div>
<div id="box">
</div>
</div>
Related
I am trying to build a tag cloud: When I click on a tag, the required functons runs three times, as in 3,2,1, or 2,1 instead of only one time.
This happens both on the jquery version and on plain js. What do I'm missing?
This is a very simple code, and I'm stuck on it:
.cloud .weight-1 { font-size: 10px; }
.cloud .weight-2 { font-size: 25px; }
.cloud .weight-3 { font-size: 35px; }
<!DOCTYPE html>
<html>
<head>
<title>Exercise</title>
<link rel="stylesheet" type="text/css" href="2.css">
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
</head>
<body>
<div class="cloud">
<div id="firstword" class="weight-1" onclick="func1()">Cloud1</a>
<div id="secondword" class="weight-2" onclick="func2()">Cloud2</a>
<div id="thirdword" class="weight-3" onclick="func3()">Cloud3</a>
</div>
<div>
<foo class="bar">
<foo id="ba"></foo>
</foo>
</div>
<script type="text/javascript">
$(function()
{
$("#firstword").click(function()
{
alert("first.");
});;
$("#secondword").click(function(){
alert("second.");
});;
$("#thirdword").click(function(){
alert("third.");
});;
});
/*function func3(){
alert("3");
};
function func1(){
alert("1");
}
;
function func2(){
alert("2");
};*/
</script>
</body>
</html>
You're getting this error because you haven't closed your divs properly.
You need to do this:
<div class="cloud">
<div id="firstword" class="weight-1" onclick="func1()">Cloud1</div>
<div id="secondword" class="weight-2" onclick="func2()">Cloud2</div>
<div id="thirdword" class="weight-3" onclick="func3()">Cloud3</div>
</div>
Here's a jsFiddle to show this is all you need to change - https://jsfiddle.net/eyd5b0ku/
The HTML close tag is not correct. Changing it will work.
.cloud .weight-1 { font-size: 10px; }
.cloud .weight-2 { font-size: 25px; }
.cloud .weight-3 { font-size: 35px; }
<!DOCTYPE html>
<html>
<head>
<title>Exercise</title>
<link rel="stylesheet" type="text/css" href="2.css">
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div class="cloud">
<div id="firstword" class="weight-1" onclick="func1()">Cloud1</div>
<div id="secondword" class="weight-2" onclick="func2()">Cloud2</div>
<div id="thirdword" class="weight-3" onclick="func3()">Cloud3</div>
</div>
<div>
<foo class="bar">
<foo id="ba"></foo>
</foo>
</div>
<script type="text/javascript">
$(function(){
$("#firstword").click(function(){
alert("first.");
});;
$("#secondword").click(function(){
alert("second.");
});;
$("#thirdword").click(function(){
alert("third.");
});;
});
function func3(){
alert("3");
};
function func1(){
alert("1");
}
;
function func2(){
alert("2");
};
</script>
</body>
</html>
Should work fine now
$(function() {
$("#firstword").click(function(e) {
alert("first.");
});;
$("#secondword").click(function(e) {
e.stopPropagation();
alert("second.");
});;
$("#thirdword").click(function(e) {
e.stopPropagation();
alert("third.");
});;
});
.cloud .weight-1 {
font-size: 10px;
}
.cloud .weight-2 {
font-size: 25px;
}
.cloud .weight-3 {
font-size: 35px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cloud">
<div id="firstword" class="weight-1">Cloud1</a>
<div id="secondword" class="weight-2">Cloud2</a>
<div id="thirdword" class="weight-3">Cloud3</a>
</div>
<div>
<foo class="bar">
<foo id="ba"></foo>
</foo>
</div>
I am using simple code to validate whether input box is empty or not and just showing check icon and warning icon accordingly.
You can see working PLUNKER here.
Problem: This set of code works fine for one set of Label:Input Box.
Imagine if we have number of input control throughout the website.
I am looking for a solution which is quite generalized. No need to repeat same set of HTML, CSS or JS code over and over again.
I know its hard to avoid some duplication but wanna write less repetitive code.
// Code goes here
$(document).ready(
function() {
$("#icon-id").hide();
$("#input-id").keyup(function() {
if ($("#input-id").val().length === 0) {
$("#input-id").addClass("redBorder");
$("#icon-id").addClass("icon-warning-sign");
$("#icon-id").removeClass("icon-check");
$("#icon-id").css("color", "red");
$("#icon-id").show();
} else {
$("#input-id").removeClass("redBorder");
$("#icon-id").removeClass("icon-warning-sign");
$("#icon-id").addClass("icon-check");
$("#icon-id").css("color", "green");
$("#icon-id").show();
}
});
});
body {
margin: 20px;
}
.input-container {
width: 250px;
position: relative;
}
.my-input {
width: 100%;
}
.my-icon {
position: absolute;
right: 0px;
color: red;
top: 8px;
}
.redBorder {
border: 1px solid red !important;
}
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#*" data-semver="2.0.3" src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap#*" data-semver="3.0.0-rc1" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body style="margin-top:55px;">
<!-- validation check -->
<div id="header" style="margin-bottom:20px;">
<div id="validate-click">Enter Below</div>
</div>
<!-- input contianre -->
<div class="form-group input-container">
<input id="input-id" type="text" class="my-input" placeholder="Enter here">
<i id="icon-id" class="icon-warning-sign my-icon"></i>
</div>
</html>
Note: Please don't refer any third party control.
You can use class selector instead id for the input. And use an data attribute to select the good icon.
live demo
You can see an example below :
function() {
$(".icon-class").hide();
$(".input-class").keyup(function() {
var idIcon = $(this).attr('data-id-icon');
if ($(this).val().length === 0) {
$(this).addClass("redBorder");
$("#" + idIcon).addClass("icon-warning-sign");
$("#" + idIcon).removeClass("icon-check");
$("#" + idIcon).css("color", "red");
$("#" + idIcon).show();
} else {
$(this).removeClass("redBorder");
$("#" + idIcon).removeClass("icon-warning-sign");
$("#" + idIcon).addClass("icon-check");
$("#" + idIcon).css("color", "green");
$("#" + idIcon).show();
}
});
}
<input data-id-icon="icon-id-1" type="text" class="my-input input-class" placeholder="Enter here">
<i id="icon-id-1" class="icon-warning-sign my-icon"></i>
<input data-id-icon="icon-id-2" type="text" class="my-input input-class" placeholder="Enter here">
<i id="icon-id-2" class="icon-warning-sign my-icon-2"></i>
Make it a jQuery plugin: https://jsfiddle.net/1nxtt0Lk/
I added the attribute data-validate to your <input />s so I can call the plugin on them using $('[data-validate']).
Code:
;( function( $, window, document, undefined ) {
"use strict";
var pluginName = "customValidator",
defaults = {
propertyName: "value"
};
function Plugin ( element, options ) {
this.element = element;
this.settings = $.extend( {}, defaults, options );
this._defaults = defaults;
this._name = pluginName;
this.init();
}
$.extend( Plugin.prototype, {
init: function() {
var $input = $(this.element);
var $icon = $input.parent().find('.my-icon');
$icon.hide();
$input.keyup(function() {
if ($input.val().length === 0) {
$input.addClass("redBorder");
$icon.addClass("icon-warning-sign");
$icon.removeClass("icon-check");
$icon.css("color", "red");
$icon.show();
console.log("empty");
} else {
$input.removeClass("redBorder");
$icon.removeClass("icon-warning-sign");
$icon.addClass("icon-check");
$icon.css("color", "green");
$icon.show();
console.log("Not empty");
}
});
},
} );
$.fn[ pluginName ] = function( options ) {
return this.each( function() {
if ( !$.data( this, "plugin_" + pluginName ) ) {
$.data( this, "plugin_" +
pluginName, new Plugin( this, options ) );
}
} );
};
} )( jQuery, window, document );
$('[data-validate]').customValidator();
body {
margin: 20px;
}
.input-container {
width: 250px;
position: relative;
}
.my-input {
width: 100%;
}
.my-icon {
position: absolute;
right: 0px;
color: red;
top: 8px;
}
.redBorder {
border: 1px solid red !important;
}
<head>
<script data-require="jquery#*" data-semver="2.0.3" src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap#*" data-semver="3.0.0-rc1" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<div class="form-group input-container">
<input id="input-id" type="text" class="my-input" placeholder="Enter here" data-validate>
<i id="icon-id" class="icon-warning-sign my-icon"></i>
</div>
<div class="form-group input-container">
<input id="input-id2" type="text" class="my-input" placeholder="Enter here" data-validate>
<i id="icon-id2" class="icon-warning-sign my-icon"></i>
</div>
PS: I used the plugin boilerplate as a base script: https://github.com/jquery-boilerplate/jquery-boilerplate ;
a commented version can be found here https://raw.githubusercontent.com/jquery-boilerplate/jquery-boilerplate/master/dist/jquery.boilerplate.js
Other answer suggest to use a class selector to iterate over each of them. Although that solution definitely would work, I suggest to get used to write jQuery plugins as in the long term it makes your project much more clean and easy to read.
// Code goes here
$(document).ready(
function() {
$(".icon-id").hide();
$(".input-id").keyup(function() {
if ($(this).val().length === 0) {
$(this).addClass("redBorder");
$(this.parentElement).find("#icon-id").addClass("icon-warning-sign");
$(this.parentElement).find("#icon-id").removeClass("icon-check");
$(this.parentElement).find("#icon-id").css("color", "red");
$(this.parentElement).find("#icon-id").show();
} else {
$(this).removeClass("redBorder");
$(this.parentElement).find("#icon-id").removeClass("icon-warning-sign");
$(this.parentElement).find("#icon-id").addClass("icon-check");
$(this.parentElement).find("#icon-id").css("color", "green");
$(this.parentElement).find("#icon-id").show();
}
});
});
body {
margin: 20px;
}
.input-container {
width: 250px;
position: relative;
}
.my-input {
width: 100%;
}
.my-icon {
position: absolute;
right: 0px;
color:red;
top: 8px;
}
.redBorder{
border: 1px solid red !important;
}
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#*" data-semver="2.0.3" src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap#*" data-semver="3.0.0-rc1" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body style="margin-top:55px;">
<!-- validation check -->
<div id="header" style="margin-bottom:20px;">
<div id="validate-click">Enter Below</div>
</div>
<!-- input contianre -->
<div class="form-group input-container">
<input id="input-id" type="text" class="my-input input-id" placeholder="Enter here">
<i id="icon-id" class="icon-warning-sign my-icon icon-id"></i>
</div>
<div class="form-group input-container">
<input id="input-id" type="text" class="my-input input-id" placeholder="Enter here">
<i id="icon-id" class="icon-warning-sign my-icon icon-id"></i>
</div>
</body>
</html>
You can try like this
You can use the classes my-input and my-icon instead of the ids.
Inside the keyup listener you can use $(this) to refer to my-input and $(this).next() to refer to my-icon as the icon is the adjacent sibling of the input.
Also chain your functions like this for brevity:
$(this).next().removeClass("icon-warning-sign")
.addClass("icon-check")
.css("color", "green")
.show();
See demo below:
// Code goes here
$(document).ready(function() {
$(".my-icon").hide();
$(".my-input").keyup(function() {
if ($(this).val().length === 0) {
$(this).addClass("redBorder");
$(this).next().addClass("icon-warning-sign")
.removeClass("icon-check")
.css("color", "red")
.show();
} else {
$(this).removeClass("redBorder");
$(this).next().removeClass("icon-warning-sign")
.addClass("icon-check")
.css("color", "green")
.show();
}
});
});
body {
margin: 20px;
}
.input-container {
width: 250px;
position: relative;
}
.my-input {
width: 100%;
}
.my-icon {
position: absolute;
right: 0px;
color: red;
top: 8px;
}
.redBorder {
border: 1px solid red !important;
}
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#*" data-semver="2.0.3" src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap#*" data-semver="3.0.0-rc1" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />
</head>
<body style="margin-top:55px;">
<!-- validation check -->
<div id="header" style="margin-bottom:20px;">
<div id="validate-click">Enter Below
</div>
</div>
<!-- input contianre -->
<div class="form-group input-container">
<input id="input-id" type="text" class="my-input" placeholder="Enter here">
<i id="icon-id" class="icon-warning-sign my-icon"></i>
</div>
</html>
$(document).ready(
function() {
$(".my-input").keyup(function() {
var $input = $(this).parent().find('input');
var $icon = $(this).parent().find('i');
if ($(this).val().length === 0) {
$input.addClass("redBorder");
$icon.addClass("icon-warning-sign").removeClass("icon-check").css("color", "red").show();
} else {
$input.removeClass("redBorder");
$icon.removeClass("icon-warning-sign").addClass("icon-check").css("color", "green").show();
}
});
});
body {
margin: 20px;
}
.input-container {
width: 250px;
position: relative;
}
.my-input {
width: 100%;
}
.my-icon {
position: absolute;
right: 0px;
color: red;
top: 8px;
display: none;
}
.redBorder {
border: 1px solid red !important;
}
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#*" data-semver="2.0.3" src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap#*" data-semver="3.0.0-rc1" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body style="margin-top:55px;">
<!-- validation check -->
<div id="header" style="margin-bottom:20px;">
<div id="validate-click">Enter Below
</div>
</div>
<!-- input contianre -->
<div class="form-group input-container">
<input type="text" class="my-input" placeholder="Enter here">
<i class="icon-warning-sign my-icon"></i>
</div>
<div class="form-group input-container">
<input type="text" class="my-input" placeholder="Enter here">
<i class="icon-warning-sign my-icon"></i>
</div>
</html>
im having trouble setting boundaries for my draggable i found out that i need to get rid of these
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
the boundaries will work
for my code to work the script above are necesary for the rest of my code if i get rid of them my code will not work at all. i need to find a way to get around this problem
$(function () {
$("div[id='dragx']").draggable({
containment: "#box",
scroll: false
});
});var z = 1; //value to make div overlappable
$('#addText').click(function (e) {
/** Make div draggable **/
$('<div />', {
class: 'ui-widget-content',
appendTo: '.container',
draggable: {
containment: 'parent',
start: function( event, ui ) {
$(this).css('z-index', ++z);
}
}
});
});
$(document).on("dblclick", '.text', function()
{
$(this).hide(); $(this).closest('.item').find('.edit_text').val($(this).text()).show();
});
$(document).on("click", ".edit_text", function()
{
return false;
});
$(document).on("click", function()
{
var editingText = $('.edit_text:visible');
if (editingText.length)
{
editingText.hide();
editingText.closest('.item').find('.text').text($(editingText).val()).show();
}
});
var count = 1;
var selectedDraggable;
ko.bindingHandlers.draggable={
init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
$(element).draggable();
$(element).addClass('item' + count);
count++;
$(element).on('click', function () {
selectedDraggable = $(this);
})
}
};
var vm=function(){
var self=this;
self.items=ko.observableArray();
self.textContent = ko.observable('');
self.init=function(){
self.items([]);
}
self.remove=function(item){
console.log(item);
self.items.remove(item);
}
self.addNew = function() {
self.items.push( self.textContent() );
self.textContent('');
}
self.init();
}
ko.applyBindings(new vm());
.item{
width: 200px;
height: 200px;
padding: 0.5em;
background:transparent;
z-index: 1;
cursor: pointer;
background-color: lightpink;
display:block;
}.container {background-color: lightgrey;
width: 500px;
height: 500px;
border: 2px solid;
position: relative;
}
<textarea data-bind="value: textContent" Placeholder="Type text to append" rows="4" cols="21"></textarea>
<button data-bind="click: addNew">Create</button><div id="box" class="container" style="float:left;">
<div data-bind="foreach:items" class="fix_backround">
<div id="dragx" href="#" class="item" data-bind="draggable:true,droppable:true">
<span data-bind="click:$parent.remove">[x]</span><br/><br/>
<center><span class="text" data-bind="text:$data"></span><input class="edit_text"/></center>
</div></div>
</div><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="http://www.pureexample.com/js/lib/jquery.ui.touch-punch.min.js"></script>
<script src="http://circletype.labwire.ca/js/circletype.js"></script><script src="http://tympanus.net/Development/Arctext/js/jquery.arctext.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
The bellow code works fine
how to clear the div area when another menu i clicked
when i click mobile it should display mobile
and when i click electronics it should display electronics
ERROR IN MY CODE
when i click mobile it display mobile
when i click electronics it display electronics
BUT
- its not clearing the previous clicked value
FULL CODE
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<title>Blueprint: Vertical Icon Menu</title>
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/leftmenu.css" />
<link rel="stylesheet" type="text/css" href="flaticon.css" />
<style>
body {position: relative;font-family: 'Lato', Calibri, Arial, sans-serif; color: #47a3da;}
body, html { font-size: 100%; height: 100%; padding: 0; margin: 0;}
a {color:#f0f0f0;text-decoration: none;}
a:hover {color: #000;}
#header{height: 90px;width: 100%;background-color: #B9F5BB;}
#footer{height: 50px;width: 100%;background-color: #FDD5CB;}
.dis123{width:75%;float:left; height: 500px;background-color:#DCEEE3; text-align: left; }
.postleftmen{width:25%;float:left;}
</style>
</head>
<body>
<div id="header">
Head
</div>
<div class="postleftmen">
<ul class="cbp-vimenu">
<li>mobile</li>
<li>electroics</li>
<li>vehicle</li>
<li>home</li>
</ul>
</div>
<div class="dis123">
display
<div id="mobi" style="display:none;z-index:99;" class="answer_list" >mobiles</div>
<div id="elec" style="display:none;z-index:99;" class="answer_list" >electronics</div>
<div id="vehi" style="display:none;z-index:99;" class="answer_list" >vehicles</div>
<div id="home" style="display:none;z-index:99;" class="answer_list" >home</div>
</div>
<div style="clear:both"> </div>
<div id="footer">
Footer
</div>
<script>
function mob() {
document.getElementById('mobi').style.display = "block";
}
function ele() {
document.getElementById('elec').style.display = "block";
}
function veh() {
document.getElementById('vehi').style.display = "block";
}
function hme() {
document.getElementById('home').style.display = "block";
}
</script>
</body>
</html>
Following clear the all divs(Hides the all DIVS)
function hidemenus() {
document.getElementById('mobi').style.display = "none";
document.getElementById('elec').style.display = "none";
document.getElementById('vehi').style.display = "none";
document.getElementById('home').style.display = "none";
}
So in every mouse click request we hide the all DIVs and show the requested DIV.
function mob() {
hidemenus();
document.getElementById('mobi').style.display = "block";
}
Hope this would work for you.
It is because you never hide the previous divs.
What you can do is save the current active one in a variable and close it when the link is clicked.
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<title>Blueprint: Vertical Icon Menu</title>
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/leftmenu.css" />
<link rel="stylesheet" type="text/css" href="flaticon.css" />
<style>
body {position: relative;font-family: 'Lato', Calibri, Arial, sans-serif; color: #47a3da;}
body, html { font-size: 100%; height: 100%; padding: 0; margin: 0;}
a {color:#f0f0f0;text-decoration: none;}
a:hover {color: #000;}
#header{height: 90px;width: 100%;background-color: #B9F5BB;}
#footer{height: 50px;width: 100%;background-color: #FDD5CB;}
.dis123{width:75%;float:left; height: 500px;background-color:#DCEEE3; text-align: left; }
.postleftmen{width:25%;float:left;}
</style>
</head>
<body>
<div id="header">
Head
</div>
<div class="postleftmen">
<ul class="cbp-vimenu">
<li>mobile</li>
<li>electroics</li>
<li>vehicle</li>
<li>home</li>
</ul>
</div>
<div class="dis123">
display
<div id="mobi" style="display:none;z-index:99;" class="answer_list" >mobiles</div>
<div id="elec" style="display:none;z-index:99;" class="answer_list" >electronics</div>
<div id="vehi" style="display:none;z-index:99;" class="answer_list" >vehicles</div>
<div id="home" style="display:none;z-index:99;" class="answer_list" >home</div>
</div>
<div style="clear:both"> </div>
<div id="footer">
Footer
</div>
<script>
var currentDisplay = "";
function mob() {
if (currentDisplay != "")
document.getElementById(currentDisplay).style.display = "none";
document.getElementById('mobi').style.display = "block";
currentDisplay = "mobi";
}
function ele() {
if (currentDisplay != "")
document.getElementById(currentDisplay).style.display = "none";
document.getElementById('elec').style.display = "block";
currentDisplay = "elec";
}
function veh() {
if (currentDisplay != "")
document.getElementById(currentDisplay).style.display = "none";
document.getElementById('vehi').style.display = "block";
currentDisplay = "vehi";
}
function hme() {
if (currentDisplay != "")
document.getElementById(currentDisplay).style.display = "none";
document.getElementById('home').style.display = "block";
currentDisplay = "home";
}
</script>
</body>
</html>
Tip: Using Jquery would make things a lot easier.
Alright, so the green square is suppose to show when your mouse is on the red square, but it doesn't. Here is the code:
<html>
<head>
<script type="text/javascript"
src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
$("a").bind("mouseover",
function(){
$("b").css("display", "block");
});
$("a").bind("mouseout",
function(){
$("b").css("display", "none");
});
});
-->
</script>
</head>
<body>
<div class="a" style="background-color: #ff0000; height: 50px; width: 50px;"></div>
<div class="b" style="display: none; background-color: #00ff00; height: 50px; width: 50px;"></div>
</body>
</html>
Put a dot before each selector to form a class selector:
$(".a").bind("mouseover",
function(){
...
Your code can be reduced to this:
$(document).ready(function() {
$(".a").hover(function() {
$(".b").toggle();
});
});
http://jsfiddle.net/karim79/EkA6p/1/
Should be $(".a"). the selector needs a period. Where if you had id="a" then you would use ("#a"), but just doing $("a") will actually select all links i.e. <a href="">
http://jsfiddle.net/hZL94/
you need to set the class .a .b
<script type="text/javascript">
$(document).ready(function() {
$(".a").bind("mouseover",
function(){
$(".b").css("display", "block");
});
$(".a").bind("mouseout",
function(){
$(".b").css("display", "none");
});
});
</script>
It's becasue you try to select the <a> and <b> elements, instead of the <div class="a"> and <div class="b"> elements. $('.a') instead of $('a'). See jsFiddle.
$(document).ready(function() {
$(".a").bind("mouseover", function() {
$(".b").css("display", "block");
});
$(".a").bind("mouseout", function() {
$(".b").css("display", "none");
});
});
try this
<html>
<head>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#a").bind("mouseover",
function(){
$("#b").css("display", "block");
});
$("#a").bind("mouseout",
function(){
$("#b").css("display", "none");
});
});
</script>
</head>
<body>
<div id="a" style="background-color: #ff0000; height: 50px; width: 50px;"></div>
<div id="b" style="display: none; background-color: #00ff00; height: 50px; width: 50px;"></div>
</body>
</html>