I am a bit new to CSS and HTML codding but there is a button on the center of the screen. When you click the button it needs to fade out to show a few more buttons. Almost like a flip book every time you click the button it will go in a order to another set of button. A button appearing will fade in and buttons going out will fade out. I need some help on how to do this. I am stuck trying to fade the buttons and having them work like a flip book. Thanks!
mercredi 1 juillet 2015
ajax response needed to be assigned to a div
I am implementing an image gallery using an Ajax call.
The call passes a value and gets an HTML code as a response. I checked this response and it is correct.
And if I put this code into a static DIV, the gallery works with no problems.
But if I inject the code with AJAX, when I click on an image, it opens in the window as a normal image: the gallery pop-up is not working.
What could be the cause of this problem?
The code is as follows
$.ajax({
type: 'GET',
url: 'www.test.com',
data: {
type: product,
use: 'gallery'
},
dataType: 'html',
success: function(data) {
$("#dv_gallery").append(data);
}
});
the following is the HTML code in the page
<div class="portfolio-adaptive adaptive-three" id="dv_gallery"></div>
How do you make a horizontal scroll bar using bootstrap's grid system
I'm trying to using bootstrap's columns and the combined total is 24. Now I know after a combined total of 12 it breaks to a line, but is there a way to keep it on the same line and just use a horizontal scroll bar to view the rest? this is what I have in the view:
<div class="col-lg-9 col-md-7 col-sm-8 col-xs-9">
<div class="well">
<h3>Example</h3>
<hr>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<div class="Description_cat_well">
<div class="well">
<h4>Example</h4>
<hr>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<div class="Description_cat_well">
<div class="well">
<h4>Example</h4>
<hr>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<div class="Description_cat_well">
<div class="well">
<h4>Example</h4>
<hr>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<div class="Description_cat_well">
<div class="well">
<h4>Example</h4>
<hr>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<div class="Description_cat_well">
<div class="well">
<h4>Example</h4>
<hr>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<div class="Description_cat_well">
<div class="well">
<h4>Example</h4>
<hr>
</div>
</div>
</div>
</div>
</div>
</div>
This is what I have in my less file:
.well {
height: 325px;
overflow-x: scroll;
overflow-y: hidden;
width: 150%;
max-width: 100%;
}
Make form label align above input box
I'm trying to make my input boxes align above their text boxes however as shown in the jsfiddle below, their arrangement is totally out of wack.
JSfiddle: http://ift.tt/1CbN7JF
I would like them to look like this:
This is my HTML code:
<form class="form-horizontal">
<p id="New">For New Individual's Only *</p>
<h1>Sign-up Requirements</h1>
<div class="form-group">
<label for="nric" class="col-sm-3 col-sm-offset-0 control-label">NRIC*</label>
<div class="col-sm-offset-2 col-sm-9">
<input type="text" class="form-control" id="nric" placeholder="Enter NRIC">
</div>
</div>
<div class="form-group">
<label for="firstName" class="col-sm-3 col-sm-pull-0 control-label">First Name*</label>
<div class="col-sm-offset-2 col-sm-9">
<input type="text" class="form-control" id="firstName" placeholder="Enter First Name">
</div>
</div>
<div class="form-group">
<label for="lastName" class="col-sm-3 col-sm-offset-0 control-label">Last Name*</label>
<div class="col-sm-offset-2 col-sm-9">
<input type="text" class="form-control" id="lastName" placeholder="Enter Last Name">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-3 col-sm-offset-0 control-label">Email*</label>
<div class="col-sm-offset-2 col-sm-9">
<input type="text" class="form-control" placeholder="Enter email"/>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-3 col-sm-offset-0 control-label">Login Password*</label>
<div class="col-sm-offset-2 col-sm-9">
<input type="password" class="form-control" id="inputPassword" placeholder="Enter Password">
</div>
</div>
<div class="form-group">
<label for="confirmPassword" class="col-sm-3 control-label">Confirm Password*</label>
<div class="col-sm-offset-2 col-sm-9">
<input type="password" class="form-control" id="confirmPassword" placeholder="Enter Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-9 col-sm-push-2">
<label class="radio-inline">
<input type="radio" name="ackRadio" value="option1" /> I have read and agreed to the <span id ="acknowledge"><a href="terms&condition.php">Terms and Conditions.</a></span>
</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-9">
<button type="register" class="btn btn-primary">Register</button>
</div>
</div>
</form>
Flex box column row issue in Internet Explorer
In having an issue in Internet explorer where it does not render flex box elements correctly in conjunction to rows.
Columns seem to work fine in both browsers but...
IE seems to be shrinking the rows for no reason? meaning I can fix it by applying flex: 1 0 auto(prevent shrinking) to rows and flex:1 to columns but is not constant code.
Is there a fix to it in IE or am I doing something wrong as Chrome renders it correctly this is my current fix and seems like a hack to me.
Chrome
IE:
<html>
<body>
<style>
div.form{
display:block;
width:500px;
height:500px;
overflow-y:scroll;
}
</style>
<div class="form">
<div style="display:flex;flex-direction:column;background-color:white;">
<div style="display:inline-flex;flex:1;background-color:purple;padding:10px;box-sizing:border-box;">hiiiiiiiidddsssssssdddddddd</div>
<div style="display:inline-flex;flex:1;background-color:pink;">
<input type="text" style="width:100%;padding:10px;"/>
</div>
</div>
<div style="display:flex;flex-direction:column;background-color:white;">
<div style="display:inline-flex;flex:1;background-color:purple;padding:10px;box-sizing:border-box;">hiiiiiiiidddsssssssdddddddd</div>
<div style="display:inline-flex;flex:1;background-color:pink;">
<input type="text" style="width:100%;padding:10px;"/>
</div>
</div>
<div style="display:flex;flex-direction:row;background-color:white;">
<div style="display:inline-flex;flex:1;background-color:purple;padding:10px;box-sizing:border-box;">hiiiiiiiidddsssssssdddddddd</div>
<div style="display:inline-flex;flex:1;background-color:pink;">
<input type="text" style="width:100%;padding:10px;"/>
</div>
</div>
<div style="display:flex;flex-direction:row;background-color:white;">
<div style="display:inline-flex;flex:1;background-color:purple;padding:10px;box-sizing:border-box;">hiiiiddssdddddddd</div>
<div style="display:inline-flex;flex:1;background-color:pink;">
<input type="text" style="width:100%;padding:10px;"/>
</div>
</div>
</div>
</body>
</html>
Fiddle: http://ift.tt/1JyBKOz
Cheers for the help ;)
How can i make my sub-menu slide down and up when click on main item?
$(document).ready(function () {
$('.slideout-menu-toggle').on('click', function(event){
event.preventDefault();
// create menu variables
var slideoutMenu = $('.slideout-menu');
var slideoutMenuWidth = $('.slideout-menu').width();
// toggle open class
slideoutMenu.toggleClass("open");
// slide menu
if (slideoutMenu.hasClass("open")) {
slideoutMenu.animate({
left: "0px"
});
} else {
slideoutMenu.animate({
left: -slideoutMenuWidth
}, 250);
}
});
});
$('.mobile-sub-menu').click(
function() {
$(this).find('li').slideDown();
},
function() {
$(this).find('li').slideUp();
});
.slideout-menu {
position: absolute;
top: 100px;
left: -9999px;
width: 100%;
height: 100%;
background: rgb(248, 248, 248);
z-index: 1;
}
.slideout-menu .slideout-menu-toggle {
position: absolute;
top: 12px;
right: 10px;
display: inline-block;
padding: 6px 9px 5px;
font-family: Arial, sans-serif;
font-weight: bold;
line-height: 1;
background: #222;
color: #999;
text-decoration: none;
vertical-align: top;
}
.slideout-menu .slideout-menu-toggle:hover {
color: #fff;
}
.slideout-menu ul {
list-style: none;
font-weight: 300;
border-top: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
}
.slideout-menu ul li {
/*border-top: 1px solid #dddddd;*/
border-bottom: 1px solid #dddddd;
}
.slideout-menu ul li a {
position: relative;
display: block;
padding: 10px;
color: #999;
text-decoration: none;
}
.slideout-menu ul li a:hover {
background: #aaaaaa;
color: #fff;
}
.slideout-menu ul li a i {
position: absolute;
top: 15px;
right: 10px;
opacity: .5;
}
<script src="http://ift.tt/1qRgvOJ"></script>
<button type="button" class="slideout-menu-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<body>
<div class="slideout-menu">
<ul>
<li><a href="#">MANUALS</a>
<ul class="mobile-sub-menu">
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
</ul>
</li>
<li><a href="#">NEWS</a></li>
<li><a href="#">SPARE PART</a></li>
<li><a href="#">Photo Gallery</a></li>
<li><a href="#">WHERE TO BUY</a></li>
<li><a href="#">SUPPORT</a></li>
<li><a href="#">EDIT BOOK</a></li>
</ul>
</div>
I add some sub-item under MANUALS main item. What can I do to make it invisible and slide down or up when I click on its parent main item?
I try to write some jQuery code but not working. Is something wrong on my jQuery code?
What CSS can display right, center and left aligned images like a table can?
I want to use CSS to reproduce the behaviour of the simple HTML table below.
The HTML table has a width of 100% with just one row and three columns. Each column contains an image where image1 is left-aligned; image2 is centered; and image3 is right-aligned.
Importantly, when the browser window is resized to be very small, the images should not overlap or wrap onto the next line. They should simply stay next to each other in the same line (this is what the table solution does).
This sounds like such a simple requirement, but I've been struggling with this for many hours and so any help would be very much appreciated.
<html>
<head>
<title>Test</title>
</head>
<body>
<table width="100%">
<tr>
<td align="left">
<img width="150" height="129" src="image1.gif">
</td>
<td align="center">
<img width="400" height="120" border="0" src="image2.jpg"> <!-- This is the main logo -->
</td>
<td align="right">
<img width="141" height="80" src="image3.png">
</td>
</tr>
</table>
</body>
</html>
Many thanks in advance.
Inscription à :
Articles (Atom)