All div are generated dynamically, and having same class class="bucket". This div had one more div inside class="restPart" rest part, which will hide, when page load first time.
What I want, I have more than one div,
1. Each divs hides the rest part, when page load first time.
2. Each div are diving into two part, one part will always show and rest part will not show.
3. Rest part will appear only when we click the link "show more",
4. When div are fully shown It will show link "show less", when we click on it, will hide the rest part.
5. This should work only for one div on which we are clicking, other divs should be unaware.
_data_grid.html
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("#restPart").hide();
$('#grid_content').on('click','.more', function(){
//$("#restPart").show();
$("div").children("div").show();
$("#showRest").hide();
});
$('#grid_content').on('click','.less', function(){
//$("#restPart").hide();
$("#showRest").show();
$(this).closest("div").hide();
});
});
</script>
#grid_content {
overflow: hidden; clear: both;
}
#grid_content .bucket {
width: 290px; float: left; margin: 0 0 48px 20px;
border: 1px solid #262626;
background: $gray-lighter;
}
#grid_content .bucket ul {
margin: 0 0 0 0; padding: 0 0 0 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<section id="grid_content">
<!--1st -->
<div class="bucket">
... Content of visible part of bucket...
Show More.
<!--Below is the rest part when we click on the above link, Showrest it will show-->
<div class="restPart" id="restPart">
... Content of Rest Part and click on the Show Less It will hide this div...
Show Less.
</div>
</div>
<!--2nd -->
<div class="bucket">
... Content of visible part of bucket...
Show More.
<!--Below is the rest part when we click on the above link, Showrest it will show-->
<div class="restPart" id="restPart">
... Content of Rest Part and click on the Show Less It will hide this div...
Show Less.
</div>
</div>
</section>
What I want
In the like following figures, more div will be generated dynamically, previously all will hide, when I click on first div show the rest content, but rest will not show, please see the figure 2,
Figure 1
Figure 2
As noted by others, remove duplicate IDs.
Judging by your image,
your button Show more, (once clicked - reveals the content and) becomes: Show less so...
change button text (So use a single toggle button!)
toggle/slide the previous DIV
$(function() { // DOM is now ready
$("#grid_content").on("click", ".toggle", function(evt) {
evt.preventDefault(); // Prevent window following #hash / jump
var more = $(this).text() === "Show More";
$(this).text(more ? "Show Less" : "Show More").prev(".restPart").slideToggle();
});
});
.bucket {
width: 290px;
float: left;
margin: 0 0 48px 20px;
border: 1px solid #262626;
background: lightgray;
}
.restPart{
overflow:auto;
display:none; /* hide initially */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="grid_content">
<div class="bucket">
<p>Visible part....</p>
<div class="restPart">
<p>Content...</p>
</div>
Show More
</div>
<div class="bucket">
<p>Visible part....</p>
<div class="restPart">
<p>Content...</p>
</div>
Show More
</div>
</section>
First of all - your naming strategy is a bit wrong. HTML document can contain (by standards) only one object with one ID - that's the purpose of ID as such. So, you can't have many objects with id="showRest" or id="restPart" or id="showless".
Possible solution for your problem.
Design your HTML something like
<div class="bucket">
<div class="mininfo">
<div class="intro">some intro bucket 1...</div>
Show more
</div>
<div class="maxinfo" style="display: none;">
<div class="intro">Here is full content 1 of everything</div>
Show less
</div>
</div>
<div class="bucket">
<div class="mininfo">
<div class="intro">some intro bucket 2...</div>
Show more
</div>
<div class="maxinfo" style="display: none;">
<div class="intro">Here is full content 2 of everything</div>
Show less
</div>
</div>
Next, in JavaScript part you can use selectors such as:
$(".bucket .showmore").on('click', function(){
var $bucket = $(this).parents('.bucket');
$bucket.find('.mininfo').hide();
$bucket.find('.maxinfo').show();
});
$(".bucket .showless").on('click', function(){
var $bucket = $(this).parents('.bucket');
$bucket.find('.mininfo').show();
$bucket.find('.maxinfo').hide();
});
Updated 1: added two buckets to example.
Updated 2: example in JSFiddle
Updated 3: update in JSFiddle with some content kept
Related
I'm having problem to scroll in each section separately by using the same button. If I click for the first time, this should send me to section2, and then If i click again the same button, this should send me to section3
I have tried to make it by every click to scroll 500px to bottom or something like that but seems that this is not good solution for me.
$(document).ready(function() {
$('.scroller').click(function() {
var fuller = $(this).closest('.fullscreen').next(),
section = $(this).closest('.section');
section.animate({
scrollTop: section.scrollTop() + fuller.offset().top
}, 700);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section">
<a href=# class="scroller">Scroll</>
<div class="section1">
<div class="section1">Content2</div>
</div>
<div class="section2">
<div class="half-screen">
<div class="s">Content 2</div>
</div>
</div>
<div class="section3">
<span>
<div class="">Content 3</div>
</span>
</div>
<div class="section4">
<div class="half-screen">
<div class="s">Content 4</div>
</div>
</div>
</div>
This kind of code send me just to the section2 and then doesn't work.
You can use a counter to achieve your task. When the button is clicked, we check if counter hasn't reached the sections (those to be scrolled to) length (the number of the sections in the page), scroll to the next section and increment the counter otherwise scroll to the first section and assign 0 to the counter so we can click again and have the same functionality.
But before digging into the code (logic), I have some points to talk about :
your HTML is semantically wrong : an inline level element (a span in your case) can't host block level elements (a div in your case).
the button (the a.scroller element) is the only one component that has the scrolling functionality, select it (in jQuery) based on it's ID (we'll give it one) seems more better than a class (that's faster as jQuery will use the native getElementByID to select the element, you can read the jQuery code and get how it does the selecting job).
as I tried to say, classes are used to select more than one element in the page. The sections (to be scrolled to) should have a common class (also to be used in jQuery).
So building on those points above, I prepared a demo example for you in which you can extend to achieve your desired end results. Also, the example has a wealth of helpful comments to help you when reading the code.
$(() => {
/**
* select the main elements having affect in the process.
* sections: the sections to be scrolled to.
* btn: the "a" element that that triggers the scrolling effect.
* idx: the counter that used to distinguish which section should we scroll to.
**/
let sections = $('.scroll-to'),
btn = $("#scroller"),
idx = 1;
/** adding the click listener to the "a" element **/
btn.on('click', e => {
e.preventDefault(); /** preventing the jump to top (and adding "#" to the URL) **/
idx >= sections.length && (idx = 0); /** if the counter reaches the number of the section in the page we must decrement it to 0 **/
/** scroll effect: the "body" and the "html" elements should scroll not a section but the scroll destination is based on the section with the index "idx" offset from the top of the page (all the page not only the viewport) **/
$("html, body").animate({
scrollTop: $(sections[idx++]).offset().top
}, 700);
});
});
/** basic styling for the demo purposes and to allow the scroll effect to be seen **/
.scroll-to {
height: 100vh;
border: 2px solid blue;
}
#scroller {
position: fixed;
top: 0;
left: 50%;
transform: translate3d(-50%, 0, 0);
background-color: #000;
color: #fff;
padding: 8px 15px;
border-radius: 0 0 4px 4px;
text-align: center;
box-shadow: 0 0 25px -1px rgba(18, 18, 18, .6);
z-index: 999;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- no "span" elements having "div" ones which is semantically wrong -->
<!-- the sections to be scrolled to have a common class "scroll-to" which will be used to select all these section in "jQuery" -->
<!-- the "a" element now have an ID of "scroller" to select it rapidly with "jQuery" -->
<div class="section">
Scroll
<div class="scroll-to fullscreen">
Some content
</div>
<div class="scroll-to section2">
<div class="half-screen">
<div class="s">Content 2</div>
</div>
</div>
<div class="scroll-to section3">
Content 3
</div>
<div class="scroll-to section4">
<div class="half-screen">
<div class="s">Content 4</div>
</div>
</div>
</div>
I'm here for any clarifications.
Hope I pushed you further.
Can anyone help me ?
I need to create pop-up to specific in line.
if the user was reading the article and have already reached the mid articles then a pop up will appear, and if returning to the top of the popup will be hide.
This is my source code pop up
$(".news").css("width","100%");
$(document).ready(function(){
if($("#blanket").length==1){
if($("#popUpDiv2").length==1){
popup('popUpDiv2');
}
else{
popup('popUpDiv');
}
}
checkCookie('popUpDiv');
$('#popUpDiv').removeAttr('style');
$('#popUpDiv').css({left: 20, bottom: 25});
});
#blanket {width: 10px;background-color:#fff;opacity:0;position:fixed;z-index:9001;top:0px;left:0px;/*width:100%;*/}
#popUpDiv {position:fixed;background:url('../image/Pop-Up-Banner-NOS-6000-Vermillion.png') no-repeat;width:275px;height:275px;z-index:9002;background-size: 275px auto;}
.trbox{width:270px;height:270px;bottom: 0px;left: 0px;}
#popUpDiv a,#popUpDiv2 a {width:45px;height:10px;padding: 2px 35px;position:relative;bottom: 29px;left:103px;}/*fix jangan diutak atik*/
.closepopup2{position: absolute;cursor: pointer;font-weight: bold;color: #fff;width:20px;height:2px;padding: 5px 10px;float:right;bottom: 232px;right:1px;} /*fix jangan diutak atik*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
div id="popup"></div>
<div id="blanket" style="display:none;"></div>
<div id="popUpDiv" style="display:none;"><div class="trbox"> </div>
<a target="_blank" href=""></a>
<div onclick="popup('popUpDiv')" class="closepopup2"></div>
<!-- <div class="popUpbottom">
<div class="comboAlert"><input type="checkbox" name="checkboxAlert" id="checkboxAlert"> Don't show again Today</div>
</div> -->
</div>
For the line which you want to use as trigger for the popup, you have to do the following.
Suppose it is a div. Calculate the scollTop of the div on scoll event. and when the scollbar position becomes equal to the scrollTop of the div, then show the popup.
See below links,
How to get scrollbar position with Javascript?
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_prop_element_offsettop
Say I have a blank page and a button (somewhere in the top right corner). When I click that button I want to be able to create a square on the page (A contact card). And when I click it again I want to be able to create another card next to it with the same dimensions and so on (i.e every click adds a card till theres 4 in a roll then starts on the bottom of the card untill whole page is filled).
I am unsure on how I can accomplish this. I know how to insert a button and a click event just not sure how I can structure this. Would I need to use flex?
Thanks in advance,
I am trying to visualize how I can tackle this problem.
Would I need to use flex?
In 2016, flex would be the best way to approach creating horizontal rows, each containing 4 equal-width elements, yes.
But if you want a legacy-browser solution, you can also use
display: inline-block;
float: left;
width --px;
and a container with an explicitly specified width which means that every :nth-of-type(4n+1) element will start on a new row.
For instance:
.card {
display: inline-block;
float: left;
width: 100px;
margin: 12px;
}
means each card requires 124px of space (12px + 100px + 12px).
So if you give the .card-container an explicit width of 4 x 124:
.card-container {
width: 496px;
}
then after every 4 cards, the next card will begin on a new row.
Here's a quick prototype using jQuery and Twitter Bootstrap.
When pressing the button, the first card with class card-hidden is shown and has it's card-hidden class removed. The next button press will show the next card until there's no cards left.
HTML
<html>
<body>
<button id="button">Add</button>
<div class="container">
<div class="row">
<div class="card card-hidden col-xs-3">1</div>
<div class="card card-hidden col-xs-3">2</div>
<div class="card card-hidden col-xs-3">3</div>
<div class="card card-hidden col-xs-3">4</div>
</div>
</div>
</body>
</html>
CSS
.card {
height: 200px;
}
.card-hidden {
display: none;
}
JS
$("#button").on("click", function(e) {
if ($(".card-hidden").length > 0) {
$(".card-hidden").first().slideToggle(function() {
$(this).removeClass("card-hidden");
});
} else {
console.log("No more cards to show.");
}
});
What I want to accomplish is after calling jQuery $().hide(), the animation to hide a child div on a current page and then show a new div in its place.
When I call the .hide(), the parent div resizes and I do not want that.
The parent has two divs in it, a text filled div, and the div in question so when I call the hide, only the text-only div remains. I want the height to remain the same because the new content is going to be the same height.
Here is what I have:
<div class="adminContent"> //Wrapper div, this should not change in height of 668px
<div class="adminTitle"> // Text only div, remains after .hide is called
Admin > Manage Class Roster
</div>
<div class="resetBody" id="manageClassBody1"> // Div that is being hidden/replaced
... // div contents
</div>
CSS
.adminContent {
background: #F7F7F7;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
min-height: 668px;
}
How should I have it so that its height is static after I hide the child div? Thanks!
EDIT: I want to do an in place swap of the two divs with an animation to switch between the two. I looked at the replaceWith() provided by jQuery but I'm not sure how to use it for my needs.
I would suggest using the animation features of JQuery to accomplish your task.
I created a sample JSBin for you.
Example:
$(document).on("click", "#togglebtn", function() {
var divs = $('.resetBody, .resetBody2');
var hiddenDiv = divs.filter(":not(:visible)");
var visibleDiv = divs.filter(":visible");
visibleDiv.fadeToggle({
complete: function() {
hiddenDiv.fadeToggle();
}
});
});
.adminContent {
background-color: lightgreen;
padding: 10px;
}
.resetBody {
background-color: #880000
}
.resetBody2 {
background-color: lightblue
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="adminContent">//Wrapper div, this should not change in height of 668px
<div class="adminTitle">much text wow! much text wow! much text wow! much text wow! much text wow!
Admin > Manage Class Roster
</div>
<div class="resetBody">Div 1
<br/>Div 1
<br/>Div 1
<br/>Div 1
<br/>Div 1
<br/>Div 1
<br/>
</div>
<div class="resetBody2" style="display:none">Div 2 is taller
<br/>Div 2
<br/>Div 2
<br/>Div 2
<br/>Div 2
<br/>Div 2
<br/>Div 2
<br/>
</div>
</div>
<div style="margin-top:10px;">
<button id="togglebtn">Toggle</button>
</div>
G'day!
I have a page which has Horizontally Scroll feature going on there.
I have a side bar and a content box
In side bar I have 5 links, say LINK1 - LINK5
In the content box, I have 3500px of width which contains 5 sections of divs of 700px each.
So the page initially loads in the first 700px div. So if I click on Link 3, it will smoothly scrolling to 3rd div section.
However, I would like to load the page in the 2nd div.
I was able to do this using scrollLeft()
<script>$("div.content1").scrollLeft(700);</script>
But the horizontal scrolling will be messed up. The second div will act as first div, which means when I click LINK1, it won't be scrolled back.
Help?
*I think this code is needed
<script>
function goto(id, t){
//animate to the div id
$(".contentbox-wrapper").stop().animate({"left": -($(id).position().left)}, 1200);
}
</script>
This is sample of HTML code
<div id="sidebar1">
<span class="upper">Foods</span><br />
<span class="lower">Rice, Noodles & Pasta</span><br />
<span class="lower">Snacks & Tidbits</span><br />
<span class="lower">Canned & Ready to Eat</span><br />
<span class="lower">Breakfast Cereal</span><br />
<br />
This is sample of my content box
<div class="content1">
<div class="contentbox-wrapper">
<div id="rice" class="contentbox" align="center">
<h2>
Rice, Noodles & Pasta
</h2>
<section id="product">
<ul class="clear">
<li data-id="1">
<div href="#">
<img src="images/products/f1/_DSC4640.jpg" width="200" height="200" />
<h3>Maggi Curry Flavour</h3>
<p>(5 + 1) x 79 G</p>
<h2>Price:$2.40</h2>
</div>
</li>
I've created an example based a little on your markup. I hope, that it is, what you're looking for. I also made some minor changes on your JavaScript. See the explanation below.
HTML
<nav>
<a>Item 1</a>
<a>Item 2</a>
</nav>
<div class="contentbox-wrapper">
<div>
<h2>Item 1</h2>
</div>
<div>
<h2>Item 2</h2>
</div>
</div>
If you can apply a markup like this, where the index of each link corresponds with the index of each content container, then you can get rid of all the ids that you need in the JavaScript part.
CSS
div.contentbox-wrapper {
position: relative;
width: 400px;
height: 200px;
overflow: hidden;
overflow-x: scroll;
font-size: 0;
line-height: 0;
white-space: nowrap;
}
div.contentbox-wrapper > div {
display: inline-block;
width: 400px;
height: 200px;
text-align: center;
}
div.contentbox-wrapper > div:last-child {
margin-right: 0;
}
JavaScript
var container = $('div.contentbox-wrapper');
var boxes = container.children();
$('nav > a').click(function() {
container.stop().animate({
scrollLeft: boxes.eq($(this).index()).get(0).offsetLeft
}, 350);
});
Try to store selectors that you use multiple times in variables. The advantage is, that you don't need to re-query them again. This JavaScript does nothing else, then getting the offset of the box that corresponds with the clicked link, using .index() and .eq(). This value is then used in the .animate()-function to scroll to this position.
Demo
Try before buy
A few notes
If you have an ampersand within normal content like "Rice, Noodles & Pasta" you must escape it like: &.
Don't use align="center". It is deprecated since HTML4. Use CSS for this purpose.