Lets say I have these divs that are products and
<div class="container">
<div class="product">
<div class="image"><img class="img-responsive" src="http://www.shingpoint.com.pk/Images/Thumbnails/pc-a1-470-59100-080316082835.jpg"/></div>
<div class="description"><h4 class="productname">ASUS VivoMini PC - UN65H-M030M</h4></div>
<div class="price">
<span>Rs. 37,900</span>
<input type="button" class="btn btn-primary btn-sm" value="Details"/>
</div>
</div>
<div class="product">
<div class="image"><img class="img-responsive" src="http://www.shingpoint.com.pk/Images/Thumbnails/pc-a1-470-59100-080316082835.jpg"/></div>
<div class="description"><h4 class="productname">ASUS VivoMini PC - UN65H-M030M</h4></div>
<div class="price">
<span>Rs. 37,900</span>
<input type="button" class="btn btn-primary btn-sm" value="Details"/>
</div>
</div>
</div>
There are only 2 products due to 'stackoverflow restriction of mostly-code'. Lets say there are 10 of these products and I want to display 5 of them and rest would be shown one by one as per click on forward and backward buttons just like facebook have when viewing photos.
You can set your class='container div to a specific height. If your items' height is, let say, 200px you can set your container to 400px. Then on button click you can scroll container div. Your code will look like this:
<script>
function scrollOneItem(){
var container = document.getElementByClassName('container');
container.scrollTop = container.scrollHeight + 200;
}
</script>
<button onClick="scrollOneItem()">Scroll down</button>
<div class="container">
...
</div>
Related
I'm trying to have a split between columns and a set of sliders that are laid on top of each other. The goal is to have the buttons display content via a collapse toggle while having the sliders movable with an image/number tooltip combo so I can have users see what they're dragging while getting the information about the various icons they're sliding. Here's what happens
When checked, the column shows 0 or 1-pixel height.
Javascript for the slider appears but tends to overlay on top of the button content
When creating spacers for the column, nothing particularly allows the spacing to split to two columns left and right
When pressing the button for the collapsed div, the content shifts having buttons move around regardless of modification.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/10.1.0/nouislider.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/10.1.0/nouislider.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-xs-6">
<div class="spacer">
<div class = 'slider' id='slider1'></div>
<div class = 'slider' id='slider2'></div>
<div class = 'slider' id='slider3'> </div>
<div class = 'slider' id='slider4'> </div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="spacer">
<button type="button" data-target="#ConditionOne" class="btn btn-default" data-toggle="collapse">Healthy</button>
<div id="ConditionOne" class="collapse">
None
</div>
<button type="button" data-target="#ConditionTwo" class="btn btn-default" data-toggle="collapse">Okay</button>
<div id="ConditionTwo" class="collapse" >
<textarea id="conditionTwoInfo" name="conditionTwoInfo">Second Conditional Description</textarea>
</div>
<button type="button" data-target="#ConditionThree" class="btn btn-default" data-toggle="collapse">Not Okay</button>
<div id="ConditionThree" class="collapse" >
None
</div>
<button type="button" data-target="#ConditionFour" class="btn btn-default" data-toggle="collapse">Dead</button>
<div id="ConditionFour" class="collapse">
<textarea id="conditionFourInfo" name="conditionFourInfo">Final Conditional Description</textarea>
</div>
</div>
How should I handle both the column issue as well as the button triggering issue as I assume they're tied together.
First what I did is get the height of the slider. From there I hardcoded the slider's height plus an offset
.slidespace { height: 275px; //Can be whatever you want
width: 100% }
Used it as a div:
<div class="slidespace"> <div class = 'slider' id='slider1'></div>
<div class = 'slider' id='slider2'></div>
<div class = 'slider' id='slider3'> </div>
<div class = 'slider' id='slider4'> </div>
</div>
This gave me enough space to separate the two.
I have an app that display 5 div each containing a specific kind of data.
I would like to be able to show one of the div in a modal so that the user can see the data in bigger size.
This would be trigger by a button placed in the top right corner.
HTML
<div class="ui grid">
<div class="sixteen wide column center aligned">
IRM Website
</div>
<div class="sixteen wide column center aligned mediumBox"> <!-- DIV 1 -->
<button class="circular ui tiny icon right floated basic button"><i class="maximize icon"></i></button>
<map bassins="vm.bassins" dataset="pluviometre" ng-if="vm.bassins"></map>
</div>
<div class="four wide column smallBox"> <!-- DIV 2 -->
<button class="circular ui tiny icon right floated basic button"><i class="maximize icon"></i></button>
<img />
</div>
<div class="four wide column smallBox"> <!-- DIV 3 -->
<button class="circular ui tiny icon right floated basic button"><i class="maximize icon"></i></button>
<img />
</div>
<div class="four wide column smallBox"> <!-- DIV 4 -->
<button class="circular ui tiny icon right floated basic button"><i class="maximize icon"></i></button>
<map bassins="vm.bassins" ng-if="vm.bassins"></map>
</div>
<div class="four wide column smallBox"> <!-- DIV 5 -->
<button class="circular ui tiny icon right floated basic button"><i class="maximize icon"></i></button>
<map bassins="vm.bassins" ng-if="vm.bassins"></map>
</div>
</div>
<div class="ui modal"> <!-- The modal -->
<i class="close icon"></i>
<div class="header">Data in modal</div>
<div class="content">
Here is my content
</div>
</div>
The modal need this javascript to be shown
$('.ui.modal').modal('show');
The idea is that each button triggers a function inside my controller
vm.maximizeData = function(){
$('.ui.modal').modal('show');
}
But how can I display the correct div inside the modal ?
As your question says you want to show a data of particular clicked element into the modal dynamically.
Use a selector to have parent child for click function
Get the content of respective / closest / next DIV content that you want to show in modal as bigger data.
Set the modal content and then show it.
HTML
<div class="mainBox">
<div class="smallBox">
<button class="buttonAction">Button</button>
<div class="divContent">Content</div>
</div>
<div class="smallBox">
<button class="buttonAction">Button</button>
<div class="divContent">Content</div>
</div>
</div>
<div class="ui modal"> <!-- The modal -->
<i class="close icon"></i>
<div class="header">Data in modal</div>
<div class="content">
Here is my content
</div>
</div>
Jquery
$(document).ready(function(){
//Button click
$('.mainBox .smallBox .buttonAction').click(function(){
//Get content near to clicked button
var contentToSet = $(this).next('.divContent').html();
//Set the data to be shown in modal
$('.modal').find('.content').html(contentToSet);
//Make modal show
$('.modal').modal('show');
});
});
FYI, This is just an example, you may need to change variable names as per your need.
$(document).ready(function(){
//Button click
$('.buttonAction').click(function(){
//Get content near to clicked button
var contentToSet = $(this).next('div.divContent').html();
console.log(contentToSet);
//Set the data to be shown in modal
$('.modal').find('.content').html(contentToSet);
//Make modal show
//$('.modal').modal('show');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mainBox">
<div class="smallBox">
<button class="buttonAction">Button</button>
<div class="divContent">Content1</div>
</div>
<div class="smallBox">
<button class="buttonAction">Button</button>
<div class="divContent">Content2</div>
</div>
</div>
<div class="ui modal"> <!-- The modal -->
<i class="close icon"></i>
<div class="header">Data in modal</div>
<div class="content">
Here is my content
</div>
</div>
I'm trying to use jQuery to scroll to a specific element inside of a wrapping element. It works as I intended it to work, as long as the screen width isn't resized. As soon as the screen width changes, the scroll doesn't stick. Here are my current code:
Javascript
function pageInit(pageId)
{
$('.page-wrapper').animate({ scrollLeft: $('#' + pageId).offset().left }, 500);
$('#' + pageId).css('postion', 'fixed');
console.debug('Page #' + pageId + ' initiated.');
}
pageInit('about');
HTML
<div class="page-wrapper">
<div class="page main-page" id="root" data-pos="0">
<div class="group-container">
<div class="book"></div>
<div class="promo">
<div class="button">
<a href="/about">
<div class="button-logo cover-button-logo"></div>
<div class="button-text">Read the summary</div>
</a>
</div>
<div class="button">
<a href="#" onclick="return false;">
<div class="button-logo yt-button-logo"></div>
<div class="button-text">Watch the trailer</div>
</a>
</div>
<div class="button">
<a href="#" onclick="return false;">
<div class="button-logo wattpad-button-logo"></div>
<div class="button-text">Coming soon on Wattpad</div>
</a>
</div>
<div class="button">
<a href="//localhost/internals/close_tab" target="twitter">
<div class="button-logo twitter-button-logo"></div>
<div class="button-text">#Ghifari160sBeingTheOne</div>
</a>
</div>
<div class="button">
<a href="//localhost/internals/close_tab" target="facebook">
<div class="button-logo facebook-button-logo"></div>
<div class="button-text">Share it on Facebook</div>
</a>
</div>
</div>
</div>
</div>
<div class="page about-page" id="about" data-pos="100">
<div class="group-container">
<div class="summary">
%Summary%
</div>
<div class="promo">
<div class="button">
<a href="#" onclick="return false;">
<div class="button-logo yt-button-logo"></div>
<div class="button-text">Watch the trailer</div>
</a>
</div>
<div class="button">
<a href="#" onclick="return false;">
<div class="button-logo wattpad-button-logo"></div>
<div class="button-text">Coming soon on Wattpad</div>
</a>
</div>
<div class="button">
<a href="//localhost/internals/close_tab" target="twitter">
<div class="button-logo twitter-button-logo"></div>
<div class="button-text">#Ghifari160sBeingTheOne</div>
</a>
</div>
<div class="button">
<a href="//localhost/internals/close_tab" target="facebook">
<div class="button-logo facebook-button-logo"></div>
<div class="button-text">Share it on Facebook</div>
</a>
</div>
</div>
</div>
</div>
The wrapping element should be scrolled to the right until the element with the id of "about" fills the entire screen. My current code works perfectly for that part. I just need to find a way to do the same thing when the screen width changes, that way the "about" element always fills the entire screen. I've tried checking every few seconds and rescroll to the element if the screen width change, but it fails every once in awhile. Is there any way that I can make the browser scroll to the element I intended it to scroll to, then rescroll to that element after detecting changes on screen width?
EDIT:
JSFiddle is here: https://jsfiddle.net/Ghifari160/sy3qgtqe/1/
The question is difficult to answer clearly since there's no way for us to see the results without a fiddle or pen. But, considering you're needing to trigger an event on a window resize, you should look at the window.resize global event handler.
Window.resize is an event handler like any other, so use your pageInit() function as the callback parameter for the handler. Make sure to still call your function an initial time, otherwise your function won't run until the window has been resized.
Edit: might as well add an example for clarity.
window.onresize = pageInit('about');
How would I go about changing a group of images to their correct places based on the correct button that was pressed at the time. I've found examples of a single button with multiple images, but cannot figure out how to use multiple buttons that place various images in a set location.
For example, I have three buttons that each are suppose to display three different images when they are clicked, taking the place of the whichever button was displayed earlier.
HTML:
<div class="container">
<div class="row center-block" style="margin:20px auto;">
<div class="col-md-2 center-block text-center">
<button id="btnBasketball" class="btn btn-primary" onclick="basketballImg()">Basketball</button>
</div>
<div class="col-md-2 center-block text-center">
<button id="btnFootball" class="btn btn-primary" onclick="footballImg()">Football</button>
</div>
<div class="col-md-2 center-block text-center">
<button id="btnHockey" class="btn btn-primary" onclick="hockeyImg()">Hockey</button>
</div>
</div>
</div>
<div class="col-md-4">
<center>
<img id="img1" src="" class="img-rounded" alt="">
<input type="button" onclick="pic1()"/>
</center>
</div>
<div class="col-md-4">
<center>
<img id="img2" src="" class="img-rounded" alt="">
<input type="button" onclick="pic2()"/>
</center>
</div>
<div class="col-md-4">
<center>
<img id="img3" src="" class="img-rounded" alt="">
<input type="button" onclick="pic3()"/>
</center>
</div>
JAVASCRIPT:
<script>
function basketballImg(){
picLocation1('img/bbImage1.png');
picLocation2('img/bbImage2.png');
picLocation3('img/bbImage3.png');
}
function footballImg(){
picLocation1('img/fbImage1.png');
picLocation2('img/fbImage2.png');
picLocation3('img/fbImage3.png');
}
function hockeyImg(){
picLocation1('img/hyImage1.png');
picLocation2('img/hyImage2.png');
picLocation3('img/hyImage3.png');
}
</script>
Is a script like this the best way to go about getting the group of images selected? I'm open to any suggestions! Thanks in advance!
If i understand right ,you are trying to change the images to a new set of images based on the button click then .
This is the simplest way I could think of though this is not the most efficient way but this should work
function basketballImg(){
document.getElementById('img1').href = 'img/bbImage1.png';
document.getElementById('img2').href = 'img/bbImage2.png';
document.getElementById('img3').href = 'img/bbImage3.png';
}
function footballImg(){
document.getElementById('img1').href = 'img/fbImage1.png';
document.getElementById('img2').href = 'img/fbImage2.png';
document.getElementById('img3').href = 'img/fbImage3.png';
}
function hockeyImg(){
document.getElementById('img1').href = 'img/hyImage1.png';
document.getElementById('img2').href = 'img/hyImage2.png';
document.getElementById('img3').href = 'img/hyImage3.png';
}
now on click of each button these set of images will be replaced by the ones that are there .
I'm trying to align my product box to look like this:
What I have thus far:
jsFiddle
I'm just trying to obtain the results of the "boxed" area, but I cannot for the life of me figure out this alignment.
I've included external resources to my JS & CSS as well.
HTML is below:
<section id="product">
<div class="container White_BG">
<aside class="col-md-4">
<!--Category-->
<div class="sidewidt2">
<div class="productprice" id="StandardProductBox">
<div id="ItemNumber">
<span itemprop="identifier" content="sku:EB06">
<p># EB06</p>
</span>
</div>
<div itemprop="availability" id="StockStatus" content="in_stock">
<strong>Out of Stock,</strong>
Please call for availability
</div>
<p class="prod-det-price">Call for Pricing</p>
<label for="qtyproduct" id="qtylabel">Qty</label>
<input id="qtyproduct" type="text" value="1" name="dmilist_Qty_100000060715">
<ul class="productpagecart">
<li>
<span style="position:relative;">
<input type="submit" id="DisabledAddToCart" name="Add to Cart" value="ADD TO CART" alt="Add to Cart" style="cursor:not-allowed;" disabled="disabled">
<div class="DisabledCart" style="position:absolute; left:0; right:0; top:0; bottom:0; cursor:not-allowed;"></div>
</span>
<div class="modal fade" id="NotAvailable" tabindex="-1" role="dialog" aria-labelledby="NotAvailableLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<img class="closeModal" data-dismiss="modal" aria-hidden="true" src="http://cdnll.amleo.com/images/art/x_white.png" height="20" width="20" alt="X">
<h4 class="modal-title" id="myModalLabel">Not Available Online</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger"><strong>Not available for online orders. Please call 1-800-543-8995 to order; thank you.</strong></div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="ShipWeight" id="ShipWeight">
Weight: 29.80 lbs
</div>
</aside>
</div>
</section>
I'm not sure what you have the ability to adjust and what you don't, but you can do this a couple ways by changing the markup and the classes. I'll show you the finished product and you'll have to work to convert your markup to something like this.
If you want half the content to hug the left, and the other half to hug the right, you should keep each separate. You can float one section left and the other right (.pull-left and .pull-right in Bootstrap), but since you're already using Bootstrap, why not use their grid system for layout. That's what it's there for!
So set up your shopping cart item, and add a .row inside of it, and then split the content in half with two divs with .col-xs-6. Put the content inside each div. The content for the one on the right can align to the right by using .text-right.
Like this:
<div class="ItemBox ">
<div class="row">
<div class="col-xs-6">
<b>#EBRO1</b><br/>
Call for pricing.<br/><br/>
<label for="qtyInput" >Qty</label>
<input type="text" id="qtyInput" />
</div>
<div class="col-xs-6 text-right">
<b>Out of Stock,</b><br/>
Please call for availability <br/><br/>
<button class="btn btn-default">Add to Cart</button>
</div>
</div>
</div>
Demo in fiddle
Which will look like this: