I have written a own search which is actually getting the results by an Ajax. I have rewritten that code from Ajax to jQuery to show you what my fault is. Run the code below with Google Chrome or Safari. It will work. Either Type Max or Jil in the search bar and you will get an result. But if you try to get a result with Mozilla Firefox, the result box is not showing up. It gets set to display: none again and again... why is that an how can I fix that?
Here is my code:
var results = {
Max: '<div class="search-items">2: Max</div>',
Jil: '<div class="search-items">3: Jil</div>'
}
$(document).on('focus', '#search_input', function() {
$("#autocomplete-list").css("display", "block");
//$("#autocomplete-list").show();
});
$(document).on('keyup', '#search_input', function() {
var serach_request = $("#search_input").val();
if(serach_request in results){
console.log(serach_request);
$("#autocomplete-list").html(results[serach_request]);
}else{
$("#autocomplete-list").empty();
}
});
$(document).on('click', function() {
$("#autocomplete-list").hide();
});
$("#autocomplete-list, #search_input_wrapper").on('click', function() {
event.stopPropagation();
});
/* Autocomplete Stlying */
.autocomplete-items {
position: absolute;
border: 1px solid #d4d4d4;
border-bottom: none;
border-top: none;
z-index: 99;
/*position the autocomplete items to be the same width as the container:*/
top: 100%;
left: 15px;
right: 15px;
}
.autocomplete-items div {
padding: 10px;
cursor: pointer;
background-color: #fff;
border-bottom: 1px solid #d4d4d4;
text-align: left;
}
/* When hovering an item: */
.autocomplete-items div:hover {
background-color: #e9e9e9;
}
/* When navigating through the items using the arrow keys: */
.autocomplete-active {
background-color: DodgerBlue !important;
color: #ffffff;
}
<!DOCTYPE html>
<html>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" >
<div class="row" id="actions">
<div class="col-md-8 text-right">
<div class="col-md-4 col-sm-12">
<div id="search_input_wrapper" class="autocomplete form-group" style="margin: 0px">
<input id="search_input" type="text" name="search_input" class="form-control" autocomplete="off" placeholder="Kunde" style="margin-top: 25px;">
<div id="autocomplete-list" class="autocomplete-items">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Kind regards
Add event parameter to the function call . An error was showing in the console regarding the same.
$("#autocomplete-list, #search_input_wrapper").on('click', function(event) {
event.stopPropagation();
});
var results = {
Max: '<div class="search-items">2: Max</div>',
Jil: '<div class="search-items">3: Jil</div>'
}
$(document).on('focus', '#search_input', function() {
$("#autocomplete-list").css("display", "block");
//$("#autocomplete-list").show();
});
$(document).on('keyup', '#search_input', function() {
var serach_request = $("#search_input").val();
if (serach_request in results) {
console.log(serach_request);
$("#autocomplete-list").html(results[serach_request]);
} else {
$("#autocomplete-list").empty();
}
});
$(document).on('click', function() {
$("#autocomplete-list").hide();
});
$("#autocomplete-list, #search_input_wrapper").on('click', function(event) {
event.stopPropagation();
});
/* Autocomplete Stlying */
.autocomplete-items {
position: absolute;
border: 1px solid #d4d4d4;
border-bottom: none;
border-top: none;
z-index: 99;
/*position the autocomplete items to be the same width as the container:*/
top: 100%;
left: 15px;
right: 15px;
}
.autocomplete-items div {
padding: 10px;
cursor: pointer;
background-color: #fff;
border-bottom: 1px solid #d4d4d4;
text-align: left;
}
/* When hovering an item: */
.autocomplete-items div:hover {
background-color: #e9e9e9;
}
/* When navigating through the items using the arrow keys: */
.autocomplete-active {
background-color: DodgerBlue !important;
color: #ffffff;
}
<!DOCTYPE html>
<html>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="row" id="actions">
<div class="col-md-8 text-right">
<div class="col-md-4 col-sm-12">
<div id="search_input_wrapper" class="autocomplete form-group" style="margin: 0px">
<input id="search_input" type="text" name="search_input" class="form-control" autocomplete="off" placeholder="Kunde" style="margin-top: 25px;">
<div id="autocomplete-list" class="autocomplete-items">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Related
Slinding Feedback Form isn't responsive at the moment. I've tested it on the phone and the text goes over the screen.
I've changed the CSS #mrova-feedback to: max-with:90%; still not working.
I have tried nearly everything and my issue is that I can not make it responsive.
What am I doing wrong?
Any thoughts?
(function($) {
$.fn.vAlign = function() {
return this.each(function(i) {
var h = $(this).height();
var oh = $(this).outerHeight();
var mt = (h + (oh - h)) / 2;
$(this).css("margin-top", "-" + mt + "px");
$(this).css("top", "50%");
});
};
$.fn.toggleClick = function() {
var functions = arguments;
return this.click(function() {
var iteration = $(this).data('iteration') || 0;
functions[iteration].apply(this, arguments);
iteration = (iteration + 1) % functions.length;
$(this).data('iteration', iteration);
});
};
})(jQuery);
$(window).load(function() {
//cache
$img_control = $("#mrova-img-control");
$mrova_feedback = $('#mrova-feedback');
$mrova_contactform = $('#mrova-contactform');
//setback to block state and vertical align to center
$mrova_feedback.vAlign()
.css({
'display': 'block',
'height': $mrova_feedback.outerHeight()
});
//Aligning feedback button to center with the parent div
$img_control.vAlign()
//animate the form
.toggleClick(function() {
$mrova_feedback.animate({
'right': '-2px'
}, 1000);
}, function() {
$mrova_feedback.animate({
'right': '-' + $mrova_feedback.outerWidth()
}, 1000);
});
//Form handling
$('#mrova-sendbutton').click(function() {
var url = 'send.php';
var error = 0;
$('.required', $mrova_contactform).each(function(i) {
if ($(this).val() === '') {
error++;
}
});
// each
if (error > 0) {
alert('Please fill in all the mandatory fields. Mandatory fields are marked with an asterisk *.');
} else {
$str = $mrova_contactform.serialize();
//submit the form
$.ajax({
type: "GET",
url: url,
data: $str,
success: function(data) {
if (data == 'success') {
// show thank you
$('#mrova-contact-thankyou').show();
$mrova_contactform.hide();
} else {
alert('Unable to send your message. Please try again.');
}
}
});
//$.ajax
}
return false;
});
});
label {
display: block;
padding-bottom: 5px;
margin-top: 20px;
}
#mrova-feedback {
display: hidden;
width: 420px;
position: fixed;
right: -462px;
border: 1px solid #3cb58c;
padding: 8px 20px;
background-color: #fff;
}
#mrova-contactform ul {
margin: 0;
padding: 0;
}
#mrova-contactform input,
#mrova-contactform textarea {
width: 400px;
padding: 10px;
border: 1px solid #ccc;
}
#mrova-contactform ul li {
list-style: none;
padding-bottom: 20px;
}
#mrova-img-control {
cursor: pointer;
position: absolute;
left: -52px;
width: 52px;
background: transparent url('feedback_buttons/feedback.jpg');
height: 168px;
}
#mrova-contactform #mrova-sendbutton {
width: 60px;
background: #db4f4a;
color: #fff;
cursor: pointer;
padding: 5px 10px;
border: none;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>
Feedback Form Demo
</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<!-- Files For mRova Feedback Form [Dependency: jQuery] -->
<script src="mrova-feedback-form.js" type="text/javascript"></script>
<link rel="stylesheet" href="mrova-feedback-form.css" type="text/css" />
<!-- END -->
<!-- Just For Demo -->
<style type="text/css">
html,
body {
padding: 0;
margin: 0;
height: 100%;
}
body {
background-color: #f2f2f2;
font-family: helvetica, arial, tahoma, verdana, sans-serif;
}
h1 {
text-align: center;
margin-top: 40px;
color: #333;
}
</style>
<!-- END -->
</head>
<body>
<h1>Free Feedback Form</h1>
<!--Feedback Form HTML START -->
<div id="mrova-feedback">
<div id="mrova-contact-thankyou" style="display: none;">
Thank you. We'hv received your feedback.
</div>
<div id="mrova-form">
<form id="mrova-contactform" action="#" method="post">
<ul>
<li>
<label for="mrova-name">Your Name*</label> <input type="text" name="mrova-name" class="required" id="mrova-name" value="">
</li>
<li>
<label for="mrova-email">Email*</label> <input type="text" name="mrova-email" class="required" id="mrova-email" value="">
</li>
<li>
<label for="mrova-message">Message*</label>
<textarea class="required" id="mrova-message" name="mrova-message" rows="8" cols="30"></textarea>
</li>
</ul>
<input type="submit" value="Send" id="mrova-sendbutton" name="mrova-sendbutton">
</form>
</div>
<div id="mrova-img-control"></div>
</div>
<!-- Feedback Form HTML END -->
</body>
</html>
Many things are wrong.
I've tweaked your code and improved it.
The edit was made only on your HTML and CSS.
* {
box-sizing: border-box;
}
body{
background-color: #f2f2f2;
font-family: helvetica,arial,tahoma,verdana,sans-serif;
}
h1{
text-align: center;
margin-top: 40px;
color: #333;
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
input[type=submit] {
background-color: #db4f4a;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
/*background-color: #f2f2f2;*/
padding: 20px;
display: hidden;
/*width: 420px;*/
/*position: fixed;*/
/*right: -462px;*/
border: 1px solid #3cb58c;
/*padding: 8px 20px;*/
background-color: #fff;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<h1>ReFree Feedback Form</h1>
<div class="container">
<form action="/action_page.php">
<div class="row">
<div class="col-25">
<label for="fname">First Name*</label>
</div>
<div class="col-75">
<input type="text" id="fname" name="firstname" placeholder="Your name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="lname">Last Name*</label>
</div>
<div class="col-75">
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="message">Message*</label>
</div>
<div class="col-75">
<textarea id="message" name="message" placeholder="Write youre message.." style="height:200px"></textarea>
</div>
</div>
<div class="row">
<input type="submit" value="Submit">
</div>
</form>
</div>
</body>
</html>
Well forget my HTML & CSS code
the problem in this script:
$img_control.vAlign()
//animate the form
.toggleClick(function() {
$mrova_feedback.animate({
'right': '-2px'
}, 1000);
}, function() {
$mrova_feedback.animate({
'right': '-' + $mrova_feedback.outerWidth()
}, 1000);
});
The script after modification:
You must change the value of 'right': '-2px'.
I think -120 is very appropriate, try it and tell me the result.
$img_control.vAlign()
//animate the form
.toggleClick(function() {
$mrova_feedback.animate({
'right': '-120px'
}, 1000);
}, function() {
$mrova_feedback.animate({
'right': '-' + $mrova_feedback.outerWidth()
}, 1000);
});
Do not forget this tag to make the page responsive :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This tag should be in <head>
I want to execute the function getUser() via an onclick event or a listener. I have already tried both, however, none of them is working.
Below you can find my code. How can I make it work?
I have already tried to use a button and an input instead of a div, not working as well. Not even the listeners if you use a button or an input instead of a div.
$(document).on('focus', '#search_input', function() {
$("#autocomplete-list").show();
});
$(document).on('blur', '#search_input', function() {
$("#autocomplete-list").hide();
});
$(document).on('click', '.search-items', function() {
console.log(this);
});
function getUser(id){
console.log(id + "triggered");
}
/* Autocomplete Stlying */
.autocomplete-items {
position: absolute;
border: 1px solid #d4d4d4;
border-bottom: none;
border-top: none;
z-index: 99;
/*position the autocomplete items to be the same width as the container:*/
top: 100%;
left: 15px;
right: 15px;
}
.autocomplete-items div {
padding: 10px;
cursor: pointer;
background-color: #fff;
border-bottom: 1px solid #d4d4d4;
text-align: left;
}
.autocomplete-items div:hover {
/*when hovering an item:*/
background-color: #e9e9e9;
}
.autocomplete-active {
/*when navigating through the items using the arrow keys:*/
background-color: DodgerBlue !important;
color: #ffffff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="col-md-4">
<div id="search_input_wrapper" class="autocomplete form-group" style="margin: 0px">
<input id="search_input" type="text" name="search_input" class="form-control" placeholder="Kunde" style="margin-top: 25px;">
<div id="autocomplete-list" class="autocomplete-items" style="display: none;">
<div class="search-items" onclick="getUser(2)">2: Max, Mustermann</div>
<div class="search-items" onclick="getUser(3)">3: Tom, Maier</div>
</div>
</div>
</div>
I would appreciate any kind of help.
You need to use stopPropagation() on input and the list elements like so:
$(document).on('focus', '#search_input', function() {
$("#autocomplete-list").show();
});
$(document).on('click', function() {
$("#autocomplete-list").hide();
});
$("#autocomplete-list, #search_input_wrapper").on('click', function() {
event.stopPropagation();
});
function getUser(id) {
console.log(id + "triggered");
}
/* Autocomplete Stlying */
.autocomplete-items {
position: absolute;
border: 1px solid #d4d4d4;
border-bottom: none;
border-top: none;
z-index: 99;
/*position the autocomplete items to be the same width as the container:*/
top: 100%;
left: 15px;
right: 15px;
}
.autocomplete-items div {
padding: 10px;
cursor: pointer;
background-color: #fff;
border-bottom: 1px solid #d4d4d4;
text-align: left;
}
.autocomplete-items div:hover {
/*when hovering an item:*/
background-color: #e9e9e9;
}
.autocomplete-active {
/*when navigating through the items using the arrow keys:*/
background-color: DodgerBlue !important;
color: #ffffff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="col-md-4">
<div id="search_input_wrapper" class="autocomplete form-group" style="margin: 0px">
<input id="search_input" type="text" name="search_input" class="form-control" placeholder="Kunde" style="margin-top: 25px;">
<div id="autocomplete-list" class="autocomplete-items" style="display: none;">
<div class="search-items" onclick="getUser(2)">2: Max, Mustermann</div>
<div class="search-items" onclick="getUser(3)">3: Tom, Maier</div>
</div>
</div>
</div>
stopPropagation stops event bubbling up the DOM tree. In other terms, when you click on search-items the default javascript behavior is to trigger the click on the clicked element parents/grandparents as well.
So when you click on search-items it would trigger click on #search-input. And so, the opened list closes. With stopPropagation() you dismiss this behavior and tell javascript that the click event should only be listened on the clicked element.
In the below code, e is short for event which, in your case, is the click event.
I made some minor changes to your code but you can still use blur and focus. There are many ways to re-write this code but the important thing is to stopPropagation
// changed to click and toggle() to show hide the list
// but you can keep the blur and focus if you like
$(document).on('click', '#search_input', function() {
$("#autocomplete-list").toggle();
});
$(document).on('click', '.search-items', function(e) {
e.stopPropagation()
getUser(e.target.id)
// event = click, target = .search-items, id = the id of the clicked target
// just pass the id to to your getUser function
});
function getUser(id) {
console.log(`user has id ${id}`)
// concatenate strings using new Template Literals
}
/* Autocomplete Stlying */
.autocomplete-items {
position: absolute;
border: 1px solid #d4d4d4;
border-bottom: none;
border-top: none;
z-index: 99;
/*position the autocomplete items to be the same width as the container:*/
top: 100%;
left: 15px;
right: 15px;
}
.autocomplete-items div {
padding: 10px;
cursor: pointer;
background-color: #fff;
border-bottom: 1px solid #d4d4d4;
text-align: left;
}
.autocomplete-items div:hover {
/*when hovering an item:*/
background-color: #e9e9e9;
}
.autocomplete-active {
/*when navigating through the items using the arrow keys:*/
background-color: DodgerBlue !important;
color: #ffffff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="col-md-4">
<div id="search_input_wrapper" class="autocomplete form-group" style="margin: 0px">
<input id="search_input" type="text" name="search_input" class="form-control" placeholder="Kunde" style="margin-top: 25px;">
<div id="autocomplete-list" class="autocomplete-items" style="display: none;">
<div class="search-items" id="2">2: Max, Mustermann</div>
<div class="search-items" id="3">3: Tom, Maier</div>
</div>
</div>
</div>
From jQuery documentation
Description: Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
And MDN documentation
Prevents further propagation of the current event in the capturing and
bubbling phases.
If you have any questions, just ask in the comments below
Using stopPropagation is not necessary.
Your .blur (the first event to happen) prevents a .click on the menu, because it hides it before you even get to click on it. You could add a delay to the to the menu hide, or detect when a user is hovering on an item before hiding it. But now you get into the case where a user is hovering, but presses tab or loses focus some other way, so you'd have to handle that.
var focusedOnSearchItem = false;
$('.search-items').click(function() {
// console.log('search-items click()',this);
$("#autocomplete-list").hide();
});
$('.search-items').mouseenter(function() {
focusedOnSearchItem = true;
});
$('.search-items').mouseleave(function() {
focusedOnSearchItem = false;
});
$('#search_input').focus(function() {
$("#autocomplete-list").show();
});
$('#search_input').blur(function(event) {
if(!focusedOnSearchItem)
$("#autocomplete-list").hide();
});
function getUser(id){
console.log(id + "triggered");
}
/* Autocomplete Stlying */
.autocomplete-items {
position: absolute;
border: 1px solid #d4d4d4;
border-bottom: none;
border-top: none;
z-index: 99;
/*position the autocomplete items to be the same width as the container:*/
top: 100%;
left: 15px;
right: 15px;
}
.autocomplete-items div {
padding: 10px;
cursor: pointer;
background-color: #fff;
border-bottom: 1px solid #d4d4d4;
text-align: left;
}
.autocomplete-items div:hover {
/*when hovering an item:*/
background-color: #e9e9e9;
}
.autocomplete-active {
/*when navigating through the items using the arrow keys:*/
background-color: DodgerBlue !important;
color: #ffffff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="col-md-4">
<div id="search_input_wrapper" class="autocomplete form-group" style="margin: 0px">
<input id="search_input" type="text" name="search_input" class="form-control" placeholder="Kunde" style="margin-top: 25px;">
<div id="autocomplete-list" class="autocomplete-items" style="display: none;">
<div class="search-items" onclick="getUser(2)">2: Max, Mustermann</div>
<div class="search-items" onclick="getUser(3)">3: Tom, Maier</div>
</div>
</div>
</div>
I wish to make my own select.
Actually my select looks like this :
JS Fiddle
and is it coded like this :
<p>Title</p>
<form>
<input type="color" onchange="colorisPanneau(value);pageSuivante();" name="coloris_panneau" list="liste_color3" id="coloris_panneau" value="#C5B9A9" class="formc" style="height:24px;width:202px;">
<datalist id="liste_color3">
<option value="#FFFFFF">
<option value="#999999">
<option value="#000000">
<option value="#582810">
</datalist>
</form>
And i want to make it look like that :
How can i do this ?
What do i need to do to be able to personalize the interface in my combobox ?
Where can i find documentation to be able to do so ?
Thank you very much :)
The datalist cannot be modified with css, even if you could with some css-magic, you could never get multiple items inside of the datalist options. The only solution is to create a select box from scratch.
I was bored so I made you something you can start with:
$('html').on("click", function(e) {
$('.color-picker').removeClass('open');
});
$(document).on("click", ".color-value", function(e) {
e.stopPropagation();
if ($('.color-picker').hasClass('open')) {
$('.color-picker').removeClass('open');
} else {
$('.color-picker').addClass('open');
}
});
$(document).on("click", ".list-item", function() {
var color = $(this).data('color');
$('#color-input').val(color);
$('.color-value').html($(this).html());
//This is now the value of your hidden input field
$('#value').html(color);
});
* {
box-sizing: border-box;
}
.color-picker {
height: 30px;
width: 150px;
overflow: hidden;
color: #666;
background: #FFF;
}
.open {
overflow: visible;
;
}
.list {
border: 1px solid #CCC;
border-top: none;
background: #FFF;
}
.list-item {
padding: 5px;
cursor: pointer;
}
.list-item:hover {
background: #f1f1f1;
}
.list-item>span {
display: inline-block;
vertical-align: middle;
height: 20px;
line-height: 20px;
}
.list-item>span:first-child {
width: 20px;
margin-right: 5px;
}
.color-value {
height: 30px;
line-height: 30px;
padding: 0 5px;
width: 100%;
cursor: pointer;
border: 1px solid #CCC;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="color-picker">
<input id="color-input" type="hidden" name="coloris_panneau" value="" />
<div class="color-value list-item">Select your color</div>
<div class="list">
<div class="list-item" data-color="#edae0e">
<span style="background:#edae0e;"></span>
<span>Yellow</span>
</div>
<div class="list-item" data-color="#ff0000">
<span style="background:#ff0000;"></span>
<span>Red</span>
</div>
<div class="list-item" data-color="#336699">
<span style="background:#336699;"></span>
<span>Blue</span>
</div>
</div>
</div>
I have multiple complex divs with nested divs including text and images. When the page loads I am displaying 4 of the div's. A button is shown below with the option to show more. Each time the user press the show more button im using Jquery to slide down and show the next 2 divs. There are a total of 28 divs so it will be 14 rows. Once all the divs are visible the button will change to "show less" and the rest of the divs will slide up or become hidden (havnt got to this part yet)
for some reason the JsFiddle is not even working properly :(, im not the best at JavaScript. Below is the code and Jsfiddle Link. I have made simple divs in the example.
JsFiddle
Link To Js Fiddle
HTML
<div class="leaders">
<div class="colum-left">
</div>
<div class="colum-right">
</div>
<div class="colum-left">
</div>
<div class="colum-right">
</div>
</div>
<div class="leaders-hidden">
<div class="colum-left">
</div>
<div class="colum-right">
</div>
</div>
<div class="leaders-hidden-2">
<div class="colum-left">
</div>
<div class="colum-right">
</div>
</div>
<div class="leaders-hidden-3">
<div class="colum-left">
</div>
<div class="colum-right">
</div>
</div>
<center><span style="font-size: 18pt; color: #017dc5;"><a id="showmoreleaders" class="read_btw" style="color: #017dc5;" href="#">SEE MORE</a></span></center>
JS
var count = 0;
$(".leaders-hidden").addClass('hide');
$(".leaders-hidden-2").addClass('hide');
$(".leaders-hidden-3").addClass('hide');
$("#showmoreleaders").click(function() {
count++;
});
if (count == 1) {
$(".leaders-hidden").slideDown("slow", function() {
// Animation complete.
});
}
if (count == 2) {
$(".leaders-hidden-2").slideDown("slow", function() {
// Animation complete.
});
}
if (count == 3) {
$(".leaders-hidden-3").slideDown("slow", function() {
// Animation complete.
});
}
CSS
.read_btw {
border: 1px solid #017dc5;
margin-top: 10px;
padding: 15px;
display: inline-block;
}
.hide {
display: none;
}
.colum-left {
float: left;
width: 48%;
border: 1px solid #d9dada;
margin: 0px;
border-radius: 6px;
margin-right: 7.5px;
margin-bottom: 20px;
height: 200px;
}
.colum-right {
float: right;
width: 48%;
border: 1px solid #d9dada;
margin: 0px;
border-radius: 6px;
margin-right: 7.5px;
margin-bottom: 20px;
height: 200px;
}
JsFiddle
Link To Js Fiddle
here you go.
you had your if's outside the function so thats why it didn't work, also updated so you can hide them after they are all shown.
also i removed the href from the a tag because it was causing the page to go all the way up. if you don't have a link to go to, you shouldn't put hrefs to a tags
HTML
<div class="leaders">
<div class="colum-left">
</div>
<div class="colum-right">
</div>
<div class="colum-left">
</div>
<div class="colum-right">
</div>
</div>
<div class="leaders-hidden">
<div class="colum-left">
</div>
<div class="colum-right">
</div>
</div>
<div class="leaders-hidden-2">
<div class="colum-left">
</div>
<div class="colum-right">
</div>
</div>
<div class="leaders-hidden-3">
<div class="colum-left">
</div>
<div class="colum-right">
</div>
</div>
<center><span style="font-size: 18pt; color: #017dc5;"><a id="showmoreleaders" class="read_btw" style="color: #017dc5;">SEE MORE</a></span></center>
CSS
.read_btw {
border: 1px solid #017dc5;
margin-top: 10px;
padding: 15px;
display: inline-block;
}
.colum-left {
float: left;
width: 48%;
border: 1px solid #d9dada;
margin: 0px;
border-radius: 6px;
margin-right: 7.5px;
margin-bottom: 20px;
height: 200px;
}
.colum-right {
float: right;
width: 48%;
border: 1px solid #d9dada;
margin: 0px;
border-radius: 6px;
margin-right: 7.5px;
margin-bottom: 20px;
height: 200px;
}
.hide{
display: none;
}
#showmoreleaders{
cursor: pointer;
}
JS
var count = 0;
$("#showmoreleaders").click(function() {
count++;
if (count == 1) {
$(".leaders-hidden").slideDown("slow", function() {
// Animation complete.
});
}
if (count == 2) {
$(".leaders-hidden-2").slideDown("slow", function() {
// Animation complete.
});
}
if (count == 3) {
$(".leaders-hidden-3").slideDown("slow", function() {
// Animation complete.
});
$('#showmoreleaders').html('SEE LESS');
}
if (count == 4) {
$(".leaders-hidden-3").slideUp("slow", function() {
// Animation complete.
});
}
if (count == 5) {
$(".leaders-hidden-2").slideUp("slow", function() {
// Animation complete.
});
}
if (count == 6) {
$(".leaders-hidden").slideUp("slow", function() {
// Animation complete.
});
}
if (count == 7) {
$('#showmoreleaders').html('SEE MORE');
count = 0;
}
});
$(".leaders-hidden").addClass('hide');
$(".leaders-hidden-2").addClass('hide');
$(".leaders-hidden-3").addClass('hide');
I added a code sniplet below. I have div-containers with id's that i can drag onto other div objects.
My goal is to add the ID of the draggables into the div-container it is added.
It looks I have to add UI to the drop function but I do not know how to do this in the ondrop call. What would be the right solution?
var overviewJS = new function() {
this.allowDrop = function(ev) {
ev.preventDefault();
$(ev.target).bind('dragover', function(){
$(this).addClass('drag-over');
});
$(ev.target).bind('dragleave', function(){
$(this).removeClass('drag-over');
});
}
this.drag = function(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
this.drop = function(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
$(ev.target).removeClass('drag-over');
$(ev.target).effect("highlight", {color: '#b1b1b1'}, 1000);
}
}
.tbDocument {
background-color: grey;
border: 1px solid #412418;
border-radius: 2px;
width: 120px;
}
.tbProject {
width: 40px;
height: 20px;
border: 1px solid #412418;
border-radius: 2px;
}
[draggable] {
cursor: move;
padding: 10px 20px;
background-color: #666;
border: 2px dashed #eee;
margin: 10px 0;
color: white;
width: 120px;
-webkit-user-drag: element;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="tbProject" ondrop="overviewJS.drop(event)" ondragover="overviewJS.allowDrop(event)">
<center>test</center>
</div>
<div class="tbProject" ondrop="overviewJS.drop(event)" ondragover="overviewJS.allowDrop(event)">
<center>test</center>
</div>
<div class="tbProject" ondrop="overviewJS.drop(event)" ondragover="overviewJS.allowDrop(event)">
<center>test</center>
</div>
<br>
<br>
<div id="1" class="tbDocument" draggable="true">
document to drag
</div>
<div id="2" class="tbDocument" draggable="true">
document to drag
</div>
<div id="3" class="tbDocument" draggable="true">
document to drag
</div>
If I try overviewJS.drop(event,ui) in the ondrop method I receive an error that the UI is not defined.
The Answer was to add ondragstart="overviewJS.drag(event)" This method sets a variable that can later be received.
<div id="3" class="tbDocument" ondragstart="overviewJS.drag(event)" draggable="true">
document to drag
</div>