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.
Responsive Design - Toggle a Div's Visibility - how to integrate javascript with css @media
I started a previous thread with the same goal but now I have the real question and have created two fiddles jsfiddle #1 AND jsfiddles jsfiddle #2 to show the problem.
I am attempting to use principles of responsive design to adapt to changing screen size. It has these two parts
-
Use CSS to hide/show a vertical menu div (
main-nav-vert) using@mediabased on browser width. -
Use a Menu button to also hide/show the same div
main-nav-vertusing javascript.
The problem I am having is that I can find a way to integrate the javascript with the @media rules. I am open to another way (but without jQuery)
The Problem: To test these fiddles and see the problem: Reduce the window size to see the impact of @media and it should hide the menu on the left. Expand the window and the menu should reappear. Now shrink the window again until the menu disappears. Click the button and the menu appears. Click the button a second time to hide it. NOW, expanding the window will no longer show the menu.
Try #1 (jsfiddle #1)
- javascript changes the same
displayproperty ofmain-nav-vertthat@mediais changing. - javascript only changes the element NOT the underlying CSS (as shown in the inspector).
- The element values set by javascript will take precedence over the CSS property set by
@mediaand so ... - once the button is pressed, the
@mediasettings will no longer work - being overridden.
Try #2 (jsfiddle #2)
- javascript alternately sets a new class to the
main-nav-vertdiv (hiddenandvisible) with each click of the button. - the
displayproperty formain-nav-vertset by@mediawill take precedence over thedisplayproperty from thehiddenclass and the button will not hide the menu ... UNLESS - I override the
displayproperty by using!importantin thevisibleandhiddenclasses, but then@mediawon't work as before.
Please help. There must be a better way. I am looking for a pure js answer, please no jQuery. Thanks.
Wordpress footer hacked
At the end of our wordpress page (when you check the source code) we have this little gem
</body>
</html><html>
<div style='left: -3565px; position: absolute; top: -4812px'>
<a href="http://ift.tt/1C0C3i4">Coach Outlet In Jackson Nj</a>
<a href="http://ift.tt/1CLubME">Louis Vuitton Outlet</a>
<a href="http://ift.tt/1KKON0a">Cheap NFL Jerseys China</a>
<a href="http://ift.tt/1C0C3ic">Cheap Soccer Jerseys China</a>
<a href="http://ift.tt/1CLuerP">Tiffany And Co Engagement Rings</a>
<a href="http://ift.tt/1E5IptT">Cheap Jerseys</a>
<a href="http://ift.tt/1CLubMH">Roger Vivier Shoes Outlet</a>
<a href="http://ift.tt/1C0C3ig">Red Bottom Shoes</a>
<a href="http://ift.tt/1E5IspE">Jerseys Wholesale</a>
<a href="http://ift.tt/1C0C5qf">Kate Spade Outlet Online</a>
<a href="http://ift.tt/12WvE7d">Cheap NBA Jerseys</a>
<a href="http://ift.tt/1C0C5qh">Wholesale Hockey Jerseys</a>
</div>
</html>
And i can't find out exactly where this has been placed in the files. the footer seems fine
<footer id="main-footer">
<?php get_sidebar( 'footer' ); ?>
<div id="footer-bottom">
<div class="container">
<p id="copyright">
<?php printf( __( 'Copyright %1$s | Web Design by %2$s', 'Nimble' ), '<a href="" title=""></a>', '<a href=""></a>' ); ?>
</p>
</div>
<!-- end .container -->
</div>
<!-- end #footer-bottom -->
</footer>
<!-- end #main-footer -->
<?php wp_footer(); ?>
</body>
</html>
And it's not in the page templates themselves. Any ideas?
jQuery using arrow key scrolling during presentation
I'm creating a presentation using HTML for a project I'm working on. The presentation will be full-page slides and I want to implement a script with jQuery so that when the arrow keys are pressed, it scrolls smoothly between slides. Left being previous slide and right being next slide obviously.
I wrote a script but it only works the first time. I'm very new to jQuery and I can't seem to fix it.
The page the presentation will be on is: http://ift.tt/1ekJPbP
<script type="text/javascript">
$(document).keydown(function(e){
if (e.keyCode == 37) {
$('.slide').previous().ScrollTo({
duration: 2000,
easing: 'linear'
});
}
if (e.keyCode == 39) {
$('.slide').next().ScrollTo({
duration: 2000,
easing: 'linear'
});
}
});
</script>
Side Navigation Bar not showing on click of Navigation drawer Bootstrap
I am trying to get a navigation drawer working which is similar to http://ift.tt/1LEGKQY using bootstrap. I have a main navigation bar and I have been able to get a navigation drawer for mobile screens. I have created a sidebar which is hidden by default. On clicking the drawer I want my side navigation bar to appear and the contents of main navigation bar to be not present. However currently when I click the drawer, my side navigation is not shown and all the options of my main navigation bar are still present.
My HTML page source:
<body>
<div class="navbar navbar-inverse navbar-fixed-top" id="primary-nav">
<div class="container"> <a href="#" class="navbar-brand hidden-xs">MyName</a>
<button id="menu-toggle" class="navbar-toggle pull-left" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">ABOUT ME<span class="sr-only">(current)</span></a>
</li>
<li><a href="#">RESUME</a>
</li>
<li><a href="#">PROJECTS</a>
</li>
<li><a href="#">BLOG</a>
</li>
<li><a href="#">CONTACT</a>
</li>
</ul>
</div>
</div>
</div>
<div class="container" id="mobile_sideNav">
<div class="row profile">
<div class="col-md-3">
<div class="profile-sidebar">
<!-- SIDEBAR USERPIC -->
<div class="profile-userpic">
<img src="http://ift.tt/1CLubMy" class="img-responsive" alt="">
</div>
<!-- END SIDEBAR USERPIC -->
<!-- SIDEBAR USER TITLE -->
<div class="profile-usertitle">
<div class="profile-usertitle-name">
Marcus Doe
</div>
<div class="profile-usertitle-job">
Developer
</div>
</div>
<!-- END SIDEBAR USER TITLE -->
<!-- SIDEBAR BUTTONS -->
<div class="profile-userbuttons">
<button type="button" class="btn btn-success btn-sm">Follow</button>
<button type="button" class="btn btn-danger btn-sm">Message</button>
</div>
<!-- END SIDEBAR BUTTONS -->
<!-- SIDEBAR MENU -->
<div class="profile-usermenu">
<ul class="nav">
<li class="active">
<a href="#">
<i class="glyphicon glyphicon-home"></i>
Overview </a>
</li>
<li>
<a href="#">
<i class="glyphicon glyphicon-user"></i>
Account Settings </a>
</li>
<li>
<a href="#" target="_blank">
<i class="glyphicon glyphicon-ok"></i>
Tasks </a>
</li>
<li>
<a href="#">
<i class="glyphicon glyphicon-flag"></i>
Help </a>
</li>
</ul>
</div>
<!-- END MENU -->
</div>
</div>
<div class="col-md-9">
<div class="profile-content">
Some user related content goes here...
</div>
</div>
</div>
</div>
</body>
My Javascript Source:
function detectmob() {
if( navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPad/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i)
){
return true;
}
else {
return false;
}
}
$(document).ready(function() {
$("#mobile_sideNav").hide();
if(detectmob()) {
$("#primary-nav").hide();
}
});
$("#menu-toggle").click( function() {
$("#mobile_sideNav").show();
});
My css:
body {
padding-top: 70px;
}
html, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
.brand-bg, .sweet-alert button {
background-color: #00bcd4 !important;
}
.projects-wrap {
padding: 110px 0;
}
.root-sec {
position: relative;
}
.main-section {
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
}
/* Profile container */
.profile {
margin: 20px 0;
}
/* Profile sidebar */
.profile-sidebar {
padding: 20px 0 10px 0;
background: #fff;
}
.profile-userpic img {
float: none;
margin: 0 auto;
width: 50%;
height: 50%;
-webkit-border-radius: 50% !important;
-moz-border-radius: 50% !important;
border-radius: 50% !important;
}
.profile-usertitle {
text-align: center;
margin-top: 20px;
}
.profile-usertitle-name {
color: #5a7391;
font-size: 16px;
font-weight: 600;
margin-bottom: 7px;
}
.profile-usertitle-job {
text-transform: uppercase;
color: #5b9bd1;
font-size: 12px;
font-weight: 600;
margin-bottom: 15px;
}
.profile-userbuttons {
text-align: center;
margin-top: 10px;
}
.profile-userbuttons .btn {
text-transform: uppercase;
font-size: 11px;
font-weight: 600;
padding: 6px 15px;
margin-right: 5px;
}
.profile-userbuttons .btn:last-child {
margin-right: 0px;
}
.profile-usermenu {
margin-top: 30px;
}
.profile-usermenu ul li {
border-bottom: 1px solid #f0f4f7;
}
.profile-usermenu ul li:last-child {
border-bottom: none;
}
.profile-usermenu ul li a {
color: #93a3b5;
font-size: 14px;
font-weight: 400;
}
.profile-usermenu ul li a i {
margin-right: 8px;
font-size: 14px;
}
.profile-usermenu ul li a:hover {
background-color: #fafcfd;
color: #5b9bd1;
}
.profile-usermenu ul li.active {
border-bottom: none;
}
.profile-usermenu ul li.active a {
color: #5b9bd1;
background-color: #f6f9fb;
border-left: 2px solid #5b9bd1;
margin-left: -2px;
}
/* Profile Content */
.profile-content {
padding: 20px;
background: #fff;
min-height: 460px;
}
angular js span value to two way binding
<html ng-app="customControl">
<script src="js/angular.js"></script>
<script src="js/jquery.js"></script>
<script>
angular.module('customControl', []).
directive('contenteditable', function() {
return {
restrict: 'A',
require: '?ngModel',
link: function(scope, element, attrs, ngModel) {
if(!ngModel) return;
ngModel.$render = function() {
element.html(ngModel.$viewValue || '');
};
element.on('blur keyup change', function() {
scope.$apply(read);
});
read(); // initialize
function read() {
var html = element.html();
if( attrs.stripBr && html == '<br>' ) {
html = '';
}
ngModel.$setViewValue(html);
}
}
};
});
</script>
<body>
<input type="number" ng-model="val" />
<input type="number" ng-model="val1" />
<span contenteditable ng-model="userContent">{{val+val1}}</span>
<!-- I want to show sum here -->
{{userContent}}
</body>
</html>}
Hi I want to bind span value to ng-model so that I can access or send value to database.if possible also assign span value to input filed.can any one tell me how to do this.Thanks in advance.
How to access the root element when parsing HTML with jQuery?
How do I access the root element when parsing HTML with jQuery?
More specifically, why does this equals to 0:
$('<div class="messages"><p>Just a test.</p></div>')
.find('div.messages').length == 0
Where this equals to 1 like it should:
$('<div><div class="messages"><p>Just a test.</p></div></div>')
.find('div.messages').length == 1
Okay, I can wrap everything into something every time, but really do I have to?
Javascript function unable to change style display from none to block
Here is a simple code fiddle: http://ift.tt/1CbIJue which is not working for me for 2 days straight.
In my website, the 2nd, i.e. the
flag
image style display change works, but the 1st, i.e. the
upvote
image style display change does not work. However in Fiddle, both of the style display change functions are not working.
HTML:
<img id='upgrey' class='up' src='http://ift.tt/1ekJrdt' width='26px' onclick='upvote();'>
<img id='upgold' class='up' src='http://ift.tt/1CbIJui' width='26px' style='display:none'>
<img id='flaggrey' class='flag' src='http://ift.tt/1ekJpSA' height='26px' onclick='flag();'>
<img id='flagred' class='flag' src='http://ift.tt/1CbIIqd' height='26px' style='display:none'>
JS
function upvote() {
document.getElementById("upgrey").setAttribute("style", "display:none");
document.getElementById("upgold").setAttribute("style", "display:block");
}
function flag() {
document.getElementById("flaggrey").setAttribute("style", "display:none");
document.getElementById("flagred").setAttribute("style", "display:block");
}
I thought this was the bread and butter functionality of JavaScript and no idea what else I can do at all to fix this.
Ah, when the simple things fail to work!
Facebook Share doesn't share the image & title from blogger to facebook
How to fix this problems in blogger Html i have got this error in while putting my website links to http://ift.tt/1jwFzRg
The following will be treated as a redirect by the crawler:
**A HTTP redirect
A <link rel="canonical" href=".." /> tag
A <meta property="og:url" content=".." /> tag
The final URL, which we tried to extract metadata from is highlighted in bold**
my blog address is nayanewskhabar.blogspot.com and it doesnt show up my correct image and doesnt show up title of post
Send multiple checkbox values through $_POST via mail PHP
I am attempting to send my checkbox values through my mail form but it comes back as "None" every time. Thanks in advance for the help!
My code
<div class="control-group form-group">
<div class="controls">
<label>Services Required:</label> <br />
<ul class="checkbox-grid">
<li><input type="checkbox" name="services[]" value="value1" /> Text 11</li>
<li><input type="checkbox" name="services[]" value="value2" /> Text 12</li>
<li><input type="checkbox" name="services[]" value="value3" /> Text 11</li>
<li><input type="checkbox" name="services[]" value="value4" /> Text 12</li>
<li><input type="checkbox" name="services[]" value="value5" /> Text 11</li>
<li><input type="checkbox" name="services[]" value="value6" /> Text 12</li>
<li><input type="checkbox" name="services[]" value="value7" /> Text 11</li>
<li><input type="checkbox" name="services[]" value="value8" /> Text 12</li>
<li><input type="checkbox" name="services[]" value="value9" /> Text 11</li>
<li><input type="checkbox" name="services[]" value="value10" /> Text 12</li>
<li><input type="checkbox" name="services[]" value="value11" /> Text 11</li>
<li><input type="checkbox" name="services[]" value="value12" /> Text 12</li>
</ul>
</div>
My PHP:
$selectedServices = 'None';
if(isset($_POST['services']) && is_array($_POST['services']) && count($_POST['services']) > 0){
$selectedServices = implode(', ', $_POST['services']);}
$email_body = Services: $selectedServices
Any ideas?
Creating a editor
I'm trying to understand object inheritance in JS with an exercise, create a online editor, like this one that i'm writing on.
But.. i'm a little confuse here, i want use data-* to manipulate my editor:
<div class="editor__wrapper">
<div data-editor="toolbar">
</div>
<textarea data-editor="textarea"></textarea>
</div>
So, i was trying initialize like this:
$(window).on('load', function() {
$('[data-editor]').each(function() {
var element = $(this);
var editor = new Editor(element);
});
});
and the editor:
var Editor = function(element) {
this.element = element;
};
But this is not what i exactly want here..
I want initialize with data-* but create a toolbar if is a toolbar and create an editor if is an editor, but make the two inherit from the a father with commum properties.
I'm little lost here, what you guys think about this? There is a better way???
Thanks.
Specifying Critical Parts of an Image, then adding more based on resolution
I am trying to give pages background images that focus on particular parts of an image for every image size.
I currently use the following styles:
background: url(...) no-repeat;
background-size: cover;
However, when loading this on a really small screen width (e.g. a phone), the image from left to right, top to bottom, but the most important content is somewhere in the middle.
Here are some images to better explain what I mean:
Critical part of image: http://ift.tt/1ekJrdg
Image on a mobile device: http://ift.tt/1CbIJdL
Image on a desktop computer: http://ift.tt/1ekJpCf
Is there a way to specify the critical parts of an image such that it will always show on a device, then the other parts of the image grow around it/
Should I be using different images and picture elements and/or media queries instead?
Thanks for your time.
How do I get a value in jQuery to PERMANENTLY be added to the html file?
Simply, there is a function on my website which allows users to enter text and have it display on a page.
HOWEVER, that text does not stay permanently and disappears when the page is reloaded.
How do I get jQuery to add the text inserted in the textarea to stay on that page once submitted?
This is what my jQuery looks like.
//When the 'button' is clicked, it prints whatever is in the textarea in separate divs
//this is it:
$(document).ready(function() {
$('#button').click(function() {
var toAdd = $('textarea[name=input]').val();
$('.list').append('<div class="posts">' + toAdd + '</div>');
});
});
Please ask me if you don't understand me and thank you in advance for any help :)
Auto Adjusting the Size of Images and/or Icons On the Same Line
Imagine social media icons/images (e.g. Facebook, Twitter, LinkedIn) lined up next to each other on the same line. How can I make the size of the icons/images auto adjust when I add additional icons/images to that line? Right now they just jump to the next line. I want it to where, if I add icons/images, they get smaller, so as to stay on the same line; if I take icons/images away, they get larger to fit the width of the container.
Thank you for your help!
Unable to prevent an input from submitting when press the enter key on it
I'm getting an unexpected behaviour from an input. I have the following code:
<form id="search_form">
<div id="search_container">
<input type="text" id="search_text">
</div>
<select onchange="search_field_on_change()" name="search_field">
<option value="login" selected>Usuario</option>
<option value="su.name">Nombre</option>
<option value="surnames">Apellidos</option>
<option value="email">Correo</option>
<option value="role">Rol</option>
<option value="access">Acceso</option>
<option value="center">Centro</option>
</select>
<button type="button" onclick="search()">Buscar</button>
<span id="modify_user_message"></span>
</form>
When I press the enter key on the input element, the form is submitted and the following request is executed:
GET home.php?search_field=login
I want to avoid this behaviour. I've tried it with this:
$('#search_text').keypress(function(e){
console.log('Hello');
e.preventDefault();
if (e.which == 13){
search();
}
});
But I don't get anything in the console, so I think the request is performed before the event can be captured.
What can I do?
Thank you.
Can the href of a link be changed dynamically inside a twig temple in Symfony 2
I've been working on a menu in my site for a while and I've been asking a lot of question about this menu. The idea is that my menu have a select with all my project and clicking my modify or delete button while do¸what it needs to do with the selected project.
So far, I found two possible ways to do this:
-Do a form with a select and three buttons (add, modify, delete)
-Do a link for each button and generate the select in twig with a loop
I think that the more logical option would be the second one, but the problem is that my link must send the id of the selected project.
Since twig generate the html for you, once it's generated, twig cannot it again, so I can't say to twig to change the link according to my selected project!
I know that there must be a way to solve this with Javascript, but, really, I would rather prefer using a form insteed, heaven if it would seems kind of weird in this situation, because the form already knows which project is selected and it's easy to use the controller to redirect on the next page for the modify button and delete the project.
If the link to the page would change, I would need to change my javascript which is something that wouldn't happen with my oder sollution.
So, is there an other way to still make what I want with links without some javascript? If not, I'll just take my other solution.
How to display multiples of imported html copies?
I would like to make attempt for multiple html imports through a javascript/ jQuery. However, I don't find there are any examples on the internet. Possibly because the html import technology is emerging.
In fact, I made an attempt. However, this does not have to be the guidelines.
<link rel="import" class="note-import" href="blah.html" />
<div id="notes">
<!-- Put it in here -->
</div>
<script>
var links = document.getElementsByClassName('note-import');
for (var i = 0; i < links.length; i++) {
var cont = document.head.importNode(links, true);
document.getElementById('notes').appendChild(cont);
}
</script>
The code means I want to display the html(s) (whom are divs with styles and so on) into the div with id notes.
Dynamic div displaying incorrectly
I have a dynamic legend being added into a leaflet map.
My issue is where the div.innerHTML +='' gets called before the if statements and for statement have finished.
Ive been looking into Callbacks but im just really stuck after hours of looking at this, and seem to be going in circles
/*Legend Control */
function maplegendControl(){
dynamicmapLegend = L.control({position:'topright'});
dynamicmapLegend.onAdd = function (map) {
var div = L.DomUtil.create('div', 'legend'),
legendcolors = ["#7c7c7c", "#9d2a2a", "#26a82f"],
legendlabels = ["Blue", "Red", "Green"];
div.innerHTML +='<div class="legend-inner-top">'
+ '<div class="legend-inner-top-m" style="padding-top: 3px color: #e3e3e3;"><strong style="color: #e3e3e3">Legend</strong></div>'
+ '<div class="legend-inner-top-m" style="float: right;"><button type="button" class="btn btn-xs btn-legend closeLegend"></button></div>'
+ '</div>'
+ '<div class="legend-inner-bottom">'
if (map.hasLayer(jungle)){
// loop through our density intervals and generate a label with a colored square for each interval
for (var i = 0; i < legendcolors.length; i++) {
div.innerHTML +=
'<div style="margin-top: 10px;"><i style="background:' + legendcolors[i] + '"></i>' + legendlabels[i] + "</div>";
}
}
if (map.hasLayer(tropical)){
div.innerHTML +='<i><img src="assets/img/legend-tropical.png" alt="Tropical Icon" height="18" width="18"></i>' + 'Tropical' + "<div style='margin-top: 10px;'></div>";
}
if (map.hasLayer(forest)){
div.innerHTML +='<i><img src="assets/img/legend-forest.png" alt="Forest Icon" height="18" width="18"></i>' + 'Forest' + "<div style='margin-top: 10px;'></div>";
}
div.innerHTML +='</div>'
return div;
}
dynamicmapLegend.addTo(map);
}
angular-strap aside don't display properly on navbar-fixed-top
I am using angular-strap aside to display menu which is open from the button on navbar using bootstrap 3. Everything is working properly. However, after I put in navbar-fixed-top class to navbar, it don't display properly.
HTML code:
<div ng-app="myApp" ng-controller="myController">
<!-- When navbar-fixed-top class is added in, it causes problem. Without it, everything works fine -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" bs-aside="aside" data-placement="left">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
</div><!-- /.container-fluid -->
</nav>
</div>
Javascript code:
var app = angular.module('myApp', ['mgcrea.ngStrap.aside']);
app.controller('myController', function($scope){
$scope.aside = {
"title": "Title",
"content": "This is the message!"
};
});
How can I get it works?
Thank you
For Mac OSX, wysiwyg HTML editor that can handle tables
I've tried Freeway Express, Dreamweaver CC 2015, Kompozer, SeaMonkey and BlueGriffon. None of them handle HTML tables well. I want to be able to select portions of a very large table in HTML, then paste over them from an Excel file copy (the clipboard has exactly the same rows/columns). None of these tools seem to be able to do this simple task that Dreamweaver could do in 2009. Any thoughts or pointers welcome. Thank you.
Predefined editable areas CMS
I'm trying to develop a backend type cms where the user logged in to the admin area is able to edit simple things within their website. For example, allow the user to change the hours the store is open without having to go through the html code. My thoughts were php, mysql? But i am unsure how i would tagged certain areas only to be editable; I don't want the entire page to be edible, just set defined areas.
Any help/advice would be appreciated!
Why the slider plugin show before it is ready to generate?
I use the jquery slider plugin "slippry" :
I followed the tutorial and write like this:
$(document).ready(function () {
$('#item').slippry();
});
</script>
And Html
<ul id="item">
<?php
foreach ($banner_list as $key => $banner) {
echo "<li>";
echo "<a href='#slide'" . $key . "><img src='" . site_url("banner/" . $banner["image_url"]) . "'></a>";
echo "</li>";
}
?>
</ul>
The problem is , there is a second that the slider show when it is not ready.
And in a second , it is generated and show like this
Also , if I press f5 then it will not have this problem (perharps cached?) but when I press the enter at address bar to enter the page again it has the same problem again. How to fix the problem ? Thanks
Mouse Wheel Zooming
so i'm working on a canvas that you can only drag a image from side to side and use the mouse wheel to re size the image by zooming in and out on it here is the code i have so far please feel free to ask any more details. I'm trying to find a way that's compact to do this and require minimum code.
-
body { margin: 0px; padding: 0px; }
<script type="text/javascript"> function drawImage(imageObj) { var stage = new Kinetic.Stage({ container: "container", width: 1800, height: 800 }); var layer = new Kinetic.Layer(); // image var image1 = new Kinetic.Image({ image: imageObj, x: stage.getWidth() / 2 - 896 / 1, y: stage.getHeight() / 2 - 255 / 2, width: 200, height: 157, draggable: true, dragBoundFunc: function (pos) { if (pos.x < this.minX); { } this.minX = pos.x; return { x: pos.x, y: this.getAbsolutePosition().y } } }); // add cursor styling image1.on('mouseover', function() { document.body.style.cursor = 'pointer'; }); image1.on('mouseout', function() { document.body.style.cursor = 'default'; }); layer.add(image1); stage.add(layer); } var imageObj = new Image(); imageObj.onload = function() { drawImage(this); }; imageObj.src = 'image1.png'; </script> </body> </html>
Save all user entries from html text built off a loop using ruby and sinatra
I am creating a web page that displays a table. It also has four columns at the end of each record that are text fields where the user can enter data. When the user hits the submit button at the bottom I want to save all the data in all the text fields and add it to my table. How can I save the data for all the text fields? Here is my code.
<h1>Testing Table</h1>
<form action="/table/" method="POST">
<table>
<thead>
<tr>
<% event_column.each do |header| %>
<th>
<%= header %>
</th>
<% end %>
</tr>
</thead>
<tbody>
<% events.each do |event| %>
<tr>
<% event = event.first(14) %>
<% event.each do |key, value| %>
<td>
<%= value %>
</td>
<% end %>
<td><input type="text" name="event_description"></td>
<td><input type="text" name="event_type">
<td><input type="text" name="event_class">
<td><input type="text" name="issue_expert"></td>
</tr>
<% end %>
</tbody>
</table>
<br/>
<input type="submit">
<% ActiveRecord::Base.clear_active_connections! %>
</form>
I understand my issue. Since I am using the same variable to write all of the user entered columns when I try displaying in my POST method
<td><%= params[:event_description] %></td>
It will only display the last value entered because it's being reused. Is there anyway that when I hit submit I can loop through all the html text fields and save all the data? I'm pretty stuck here and I've searched all around. I understand how to save the text entry for the last row but, I don't know how to save all the text entries. I'm new to sinatra so I must be doing something fundamentally wrong.
Sticky footer floating to top of one page
I'm having difficulty figuring out why my sticky footer is working on the main page of my site, but not on another. The paragraph in the footer div stays at the bottom of the page, but the background div floats to the top of the page behind the navigation bar. Here's a fiddle of the page with the broken footer: http://ift.tt/1LJ3gZU And the homepage with the working footer: http://ift.tt/1LJ3gZW
I'm using an this CSS create the footer–
.pagewrap {
min-height: 100%;
margin-bottom: -65px;
display: block;
}
.pagewrap:after {
content: "";
display: block;
}
.footer, .pagewrap:after {
height: 65px;
margin-bottom: -65px;
}
.footer {
display: block;
background: #E0E0E0;
color: #999;
border-top: solid 1px #DDD;
}
Multiple Dateformat
i am task to change the dateformat according to the user's language. Currently the website runs in Chinese and English, However i am unable to change the format of the mask according to the user's language.
<h:outputText styleClass="outputText"
id="index_output_todate" value="#{msg.index_output_todate}">
</h:outputText>
<p:calendar
value="#{pc_Index.w_message.am_todate_filter}"
id="index_input_todate" styleClass="calendar" maxlength="10"
pattern="#{pc_Index.dateDisplayFormat}" onfocus="$(this).mask('9999年99月99日');">
<p:watermark for="index_input_todate" value="#{pc_Index.watermarkDateDisplayFormat}" />
<f:convertDateTime pattern="#{pc_Index.dateDisplayFormat}" />
</p:calendar>
I need the date format of the mask to be 9999年99月99日 when the user login as a zh_CN user or a date format of DD/MM/YYYY for en_UK user. Is there a way to do this?
I had already set the locale
public String getDateDisplayFormat() {
String locale = getUserLocale();
String DATEFORMAT_UK = "dd/MM/yyyy";
String DATEFORMAT_US = "mm/dd/yyyy";
String DATEFORMAT_CN = "yyyy年MM月dd日";
String _s = DATEFORMAT_UK;
if(!isEmptyNull(locale) && locale.equals("en_US")) {
_s = DATEFORMAT_US;
}
else if(!isEmptyNull(locale) && locale.equals("zh_CN")) {
_s = DATEFORMAT_CN;
}
return _s;
}
Bootstrap navbar width / max-width
My bootstrap navbar links are many, so it wraps (I think at 970px) - I don't want it to wrap, the width of the links in total are about 1020px. I've searched high and low for the answer :(
When I add a width of 1020px to .navbar .navbar-collapse the nav bar is now a little off center - how can I get it to be 1020px width and stay centered?
.navbar .navbar-collapse {
text-align: center;
width:1020px;
}
Then how do I get the navbar to not wrap but to collapse for tablet?
adding a text below an image after clicking on it
I am beginner to HTML I have given a task to add a text below an image after clicking on it
I am trying this
<a href="hh.jpg">
<img src="hh.jpg" width="100" figcaption="has">
</a>
but it requires 2 pages to my task to get completed. and I have to do it in one page. in order to complete my assignment. can any one guide me how to do it...?
redips - copied cell 'td/th' does not interact with drag event
I am using redips.js to drag and drop elements in tables.
I need to duplicate some td, th to other row(tr). So I made those script
function copyCells(x, y){
if((y == null || typeof y == 'undefined')
|| (x == null || typeof x == 'undefined')){
console.log('(' + x + ' ,' + y + ') : wrong variables.');
return;
}
console.log('I recieved ' + x + ', ' + y);
if(y < 1 || x < 1) {
console.log('(' + x + ', ' + y + ') : This cell is not proper target.');
return;
}
var target_tbody = $('#table2').find('tbody');
target_tbody.find('tr').each(function(idx){
var rowIdx = idx;
if(rowIdx != y) return;
$(this).find('th, td').each(function(idx2){
var colIdx = idx2;
if(colIdx > x - 1) return;
var oRow = rowIdx - 1;
var tRow = rowIdx;
console.log(target_tbody.children('tr').eq(oRow));
var originCell = target_tbody.children('tr').eq(oRow).children('td, th').eq(colIdx);
var contentsOfOriginCell = originCell.html();
var targetCell = target_tbody.children('tr').eq(tRow).children('td, th').eq(colIdx);
targetCell.html(contentsOfOriginCell);
try{
var originSelectedVal = originCell.children('.doselect').eq(0).val();
targetCell.children('select').eq(0).val(originSelectedVal);
}catch(ex){
console.log('can not copy cell.');
}
});
});
}
And follow is part of html
<!-- left container -->
<div id="left">
<table id="table1">
<colgroup>
<col width="100"/>
<col width="100"/>
<col width="100"/>
</colgroup>
<tbody id='process_body'>
</tbody>
</table>
</div><!-- left container -->
<!-- right container -->
<div id="right">
<table id="table2">
<colgroup>
<col width="100"/>
<col width="100"/>
<col width="100"/>
<col width="100"/>
<col width="100"/>
<col width="100"/>
<col width="100"/>
<col width="100"/>
</colgroup>
<tbody>
<!--
table cells marked with class name "redips-mark" as special
DIV element cannot be placed to this cells except if there is exception
see myhandler_cloned how to make exception for cloned "e" elements
-->
<tr>
<td class="redips-mark last"><input type="hidden" name='observer'></td>
<td class="redips-mark last"><input type="hidden" name='observer'></td>
<td class="redips-mark last"><input type="hidden" name='observer'></td>
<td class="redips-mark last"><input type="hidden" name='observer'></td>
<td class="redips-mark last"><input type="hidden" name='observer'></td>
<td class="redips-mark last"><input type="hidden" name='observer'></td>
<td class="redips-mark last"><input type="hidden" name='observer'></td>
<td class="upper-right redips-mark last"><input type="hidden" name='observer'></td>
</tr>
<tr>
<td class="redips-mark"><input type="hidden" name='observer'></td>
<td class="redips-mark"><input type="hidden" name='observer'></td>
<td class="redips-mark"><input type="hidden" name='observer'></td>
<td class="redips-mark"><input type="hidden" name='observer'></td>
<td class="redips-mark"><input type="hidden" name='observer'></td>
<td class="redips-mark"><input type="hidden" name='observer'></td>
<td class="redips-mark"><input type="hidden" name='observer'></td>
<th class="redips-mark"><input type="hidden" name='observer'></th>
</tr>
<tr>
<td class="redips-mark last"><input type="hidden" name='observer'></td>
<td class="redips-mark last"><input type="hidden" name='observer'></td>
<td class="redips-mark last"><input type="hidden" name='observer'></td>
<td class="redips-mark last"><input type="hidden" name='observer'></td>
<td class="redips-mark last"><input type="hidden" name='observer'></td>
<td class="redips-mark last"><input type="hidden" name='observer'></td>
<td class="redips-mark last"><input type="hidden" name='observer'></td>
<th class="redips-mark last"><input type="hidden" name='observer'></th>
</tr>
<tr>
<td class="lower-left"><input type="hidden" name='observer'></td>
<th ><input type="hidden" name='observer'></th>
<th ><input type="hidden" name='observer'></th>
<th ><input type="hidden" name='observer'></th>
<th ><input type="hidden" name='observer'></th>
<th ><input type="hidden" name='observer'></th>
<th ><input type="hidden" name='observer'></th>
<th ><input type="hidden" name='observer'></th>
</tr>
</tbody>
</table>
</div><!-- right container -->
I was suspicious about cell id. copied cell has same id with original one. But after I edit id in browser, it does not looks like.
Current status
- copied cell and original cell has same HTML code.
- original cell has still work with drag event, while copied one does not.
rd.init()only called atonloadevent.
Is there anything I can try? I am sorry to upload fiddle since this code is not mine. Thanks :D
- Maybe, if there is a way to copy td, th to other td, th with redips API. It would be the most wonderful solution that I expecting.
Do something else on certain condition if statement failing javascript
I am creating a game that requires the player to click different divs when the light up (the holes) and am trying to change the score if the divs are red, and not if they are black. Pretty simple, right? Well I can not find out what the heck is wrong with this code here:
//All the useful code
function revert(holeNum) {
if (holeNum === 1) {
if (document.getElementById("hole1").style.backgroundColor === "#C90000") {
score += 1;
document.getElementById("scoreUpdate").innerHTML = score;
alert("success");
}
document.getElementById("hole1").style.backgroundColor = "#000000";
} else if (holeNum === 2) {
if (document.getElementById("hole2").style.backgroundColor === "#C90000") {
score += 1;
document.getElementById("scoreUpdate").innerHTML = score;
}
document.getElementById("hole2").style.backgroundColor = "#000000";
} else if (holeNum === 3) {
if (document.getElementById("hole3").style.backgroundColor === "#C90000") {
score += 1;
document.getElementById("scoreUpdate").innerHTML = score;
}
document.getElementById("hole3").style.backgroundColor = "#000000";
} else if (holeNum === 4) {
if (document.getElementById("hole4").style.backgroundColor === "#C90000") {
score += 1;
document.getElementById("scoreUpdate").innerHTML = score;
}
document.getElementById("hole4").style.backgroundColor = "#000000";
} else if (holeNum === 5) {
if (document.getElementById("hole5").style.backgroundColor === "#C90000") {
score += 1;
document.getElementById("scoreUpdate").innerHTML = score;
}
document.getElementById("hole5").style.backgroundColor = "#000000";
} else if (holeNum === 6) {
console.log("hole 6 pressed");
if (document.getElementById("hole6").style.backgroundColor === "#C90000") {
score += 1;
document.getElementById("scoreUpdate").innerHTML = score;
console.log("Score Updated from hole 6");
} else {
document.getElementById("hole6").style.backgroundColor = "#000000";
console.log("hole six reverted to black");
}
}
}
The idea is one hole changes color periodically. When the divs are clicked, right from the html tag they call the revert function with the holeNum being the number of the hole. The revert function is suppose to change the hole back to black and update the score if it was red when clicked. Each hole does call the right part of the if statement directly under the function. Hole one does call the hole one part, same for 2-6. In their respective part of the first if statements, the nested if statements don't run. Under hole six, when I click the hole, regardless of what color the hole is, the only console.log statement that runs is "hole 6 pressed." Can someone help me please? Thanks.
My pagination isn't displaying with my code
Why my pagination doesnt show when the condition match with my function func_testSearchByName.php but when the condition match with my function func_testPopulateLeads.php, the pagination shows...
can somebody help me to figure it out?
here's my code for func_testPopulateLeads.php http://ift.tt/1Nxl5JF
here's my code for func_testSearchByName.php http://ift.tt/1C0pDa5
here's my pagination http://ift.tt/1Nxl5JI
here's my page where func_testPopulateLeads.php and func_testSearchByName.php included as it is inside If Else statement.. http://ift.tt/1Nxl5JK
pls help me
How to create different section in angular template (html file) conditionally
I am constructing three different table as following.
There is a lot of repetitive code in it.
The only different in each table is studentPermissions[] array which contain three objects for each student. So under each table i am just changing it for each student like studentPermissions[0], studentPermissions[1] and studentPermissions[2].
Is there any further better i can write same code in less no of lines?
<div class="module-container">
<div>
<table>
<thead>
<tr >
<td>Student</td>
<td>{{studentPermissions[0].SubjectName}}</td>
</tr>
<tr>
<th></th>
<th ng-repeat="permission in permissions"><div><span>{{permission.Name}}</span></div></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="student in studentPermissions[0].Students">
<td>{{student.FirstName}} {{student.LastName}} <small class="" style="color: #999999;">({{student.Role}})</small></td>
<td ng-repeat="permission in student.Permissions">
<input ng-model="permission.Checked" type="checkbox">
</td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<thead>
<tr >
<td>Student</td>
<td>{{studentPermissions[1].SubjectName}}</td>
</tr>
<tr>
<th></th>
<th ng-repeat="permission in permissions"><div><span>{{permission.Name}}</span></div></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="student in studentPermissions[1].Students">
<td>{{student.FirstName}} {{student.LastName}} <small class="" style="color: #999999;">({{student.Role}})</small></td>
<td ng-repeat="permission in student.Permissions">
<input ng-model="permission.Checked" type="checkbox">
</td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<thead>
<tr >
<td>Student</td>
<td>{{studentPermissions[2].SubjectName}}</td>
</tr>
<tr>
<th></th>
<th ng-repeat="permission in permissions"><div><span>{{permission.Name}}</span></div></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="student in studentPermissions[2].Students">
<td>{{student.FirstName}} {{student.LastName}} <small class="" style="color: #999999;">({{student.Role}})</small></td>
<td ng-repeat="permission in student.Permissions">
<input ng-model="permission.Checked" type="checkbox">
</td>
</tr>
</tbody>
</table>
</div>
</div>
I was not sure about question title so please feel free to update it to make it more relevant with question contents. thanks
Also, I have to show data for each customer in septate table. this is requirement
Image Link Not Working
In my webpage I have set up an image link/anchor using the following code:
<div class="bg_1">
<div class="Absolute-Center">
<span style="font-size: 50px; color: aqua">in short.</span><br />
LIVE LIFE AT YOUR OWN PACE.<br /><br /><br /><br /><br /><br /><br />
<a href="#home1"><img src="images/scrolldown.png" width="50" height="50" border="0" /></a>
</div>
</div>
<div style="height: 100vh; background-color: black;" >
<a name="home1"></a>
</div>
However when I run my page this image does not appear to be clickable, nor does it take you anywhere when you click. Any ideas? If it makes any difference the image I am using is mostly transparent.
Single page applications and elements
Are there still any benefits of using a <form> element instead of let's say a <div> element in the context of a single page application? The purpose of the <form> element makes sense to me if the "form" submission isn't made with an ajax call (I'm talking about the more traditional way of submitting a form, with a input/button of type "submit" and the action attribute of the form element that describes the url to call), but otherwise I do not see it's utility (maybe for search engines?).
css table cell alignment and ellipsis not working
I have some html code that is not hidden and cut off using the css ellipsis.
I have tried many things to fix this issue, but nothing works for me (and it is killing me I cannot fix such a simple issue). I have read all the SO posts about the css ellipsis.
Here is a visual representation of what I have:
As shown the 11/2001 (2 annees, 10 mois) is dropped to the next line and the ellipsis does not take effect.
I am trying to keep the 11/2001 (2 annees, 10 mois) next to the prompt Date d'achevement and to be cut off (hidden) with the ellipsis if the value is too long, as it is in this case.
Here is my HTML
<div class="resumeStyleStandardTableRow25">
<div class="resumeStyleStandardLabels25">Date de demarrage</div>
<div class="resumeStyleStandardLabels25">
<div class="resumeStyleDateStartContent25">01/2009</div>
<div class="resumeStyleFinishDateLabel25">Date d'achevement</div>
<div class="resumeStyleDateFinishContent25">
<div class="ellipsis">11/2011 (2 annees, 10 mois)</div>
</div>
</div>
</div>
Here is my CSS
.resumeStyleStandardTableRow25 {
display: table-row;
}
.resumeStyleStandardLabels25 {
direction: ltr;
display: table-cell;
font-weight: bold;
height: 100%;
min-height: 25px;
overflow: hidden;
padding: 2px;
padding-right: 10px;
text-align: right;
vertical-align: top;
white-space: nowrap;
}
.resumeStyleDateStartContent25 {
direction: ltr;
display: table-cell;
float: left;
padding: 2px;
text-align: left;
vertical-align: top;
width: 20%;
}
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.resumeStyleFinishDateLabel25 {
background-color: #fff;
color: #000;
direction: ltr;
display: table-cell;
float: left;
font-weight: bold;
padding: 2px;
padding-right: 10px;
text-align: left;
vertical-align: top;
}
.resumeStyleDateFinishContent25 {
direction: ltr;
display: table-cell;
float: left;
padding: 2px;
text-align: left;
vertical-align: top;
}
Can anyone point out what I am doing incorrectly?
Javascript conflicting with html anchor
I'm currently creating a website which has a persistent header and footer. To cut down on code duplication, I use jquery to load the header.html and footer.html when each different page is loaded.
Each html page which uses this header and footer, loads it with the code below.
<!-- Header and footer loading -->
<script>
$(function() {
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
<div id="header">
(header.html content rendered here)
</div>
The best way to explain this next part is by going to the site I have linked. What I would like to do is have the drop down button take a user to the specific section of the equipment page from any other page on the website. As you can currently see, this function only works if the user is already on the equipment page.
From everything I've read, cross page anchors should be setup the same way as in-page anchors. Use <a href="equipment.html#anchorname></a> and then link it to the page with <a id="anchorname></a>. However, this approach is only working when the user is on the same page as the anchor. I'm pretty sure this is due to the timing of anchor mechanism and when the jQuery code runs.
My two questions are...
- Could someone explain the sequence of events that are taking place which are causing my anchor not to work.
- What do I need to do in order to get my cross-site anchors to work properly?
Thanks and let me know if you need specific code snippets or have any questions.
How to hide html items with a radio button
This is a beginner html/css/javascript question. I've been beating my head against a wall, but still can't figure this out. I have a simple web form that users fill out(name, email, etc) and the way it's supposed to work is that when the user clicks a radio button that says "Yes" they see a drop down menu with a set number of items and when they click "No" they see a text field. I have this part working correctly, but I want the drop down menu and text field to start hidden, and then appear when the yes or no radio button is clicked. I've tried style = display:hidden; but when I used this the text and drop-down menu wouldn't appear anymore.
Thanks so much for any answers!
This is the code I'm using:
<tr align="left" valign="middle">
<td colspan="1" rowspan="1">
<p> </p>
</td>
<td colspan="1" rowspan="1">
<p><b><font color="#cc0000" face="Georgia, Times New Roman, Times, serif" size="+2">*</font></b></p>
</td>
<td colspan="1" rowspan="1">
<p>Do you own a Zaxwerks product?</p>
</td>
<td colspan="1" rowspan="1">
<p><input id="customer" name="STATUS" onclick="javascript: test();" type="radio" value="Existing Customer" /> Yes<br />
<input id="demo" name="STATUS" onclick="javascript: test();" type="radio" value="Downloaded Demo" /> No</p>
</td>
<script type="text/javascript">
function test() {
if (document.getElementById('customer').checked) {
//Show
document.getElementById('show_customer').style.display = 'block';
document.getElementById('show_customer2').style.display = 'block';
document.getElementById('show_customer3').style.display = 'block';
document.getElementById('show_customer4').style.display = 'block';
//Hide
document.getElementById('show_demo').style.display = 'none';
document.getElementById('show_demo2').style.display = 'none';
document.getElementById('show_demo3').style.display = 'none';
} else {
//Show
document.getElementById('show_demo').style.display = 'block';
document.getElementById('show_demo2').style.display = 'block';
document.getElementById('show_demo3').style.display = 'block';
//Hide
document.getElementById('show_customer').style.display = 'none';
document.getElementById('show_customer2').style.display = 'none';
document.getElementById('show_customer3').style.display = 'none';
document.getElementById('show_customer4').style.display = 'none';
}
}
</script>
<td> </td>
</tr>
<tr>
<td colspan="1" rowspan="1" style="display: none;">
<p> </p>
</td>
<td colspan="1" rowspan="1" style="display: none;">
<div id="show_customer">
<p><b><font color="#cc0000" face="Georgia, Times New Roman, Times, serif" size="+2">*</font></b></p>
</div>
<div id="show_demo" style="display: none;">
<p><b><font color="#cc0000" face="Georgia, Times New Roman, Times, serif" size="+2">*</font></b></p>
</div>
</td>
<td colspan="1" rowspan="1" style="display: none;">
<div id="show_customer2">
<p>Product Owned:</p>
</div>
<div id="show_demo2" >
<p>Where did you hear about us?:</p>
</div>
</td>
<!--This is where the user selects which product they own. (In the following code: value equals "what appears in the log file" what appears in the site menu)-->
<td colspan="1" rowspan="1">
<div id="show_customer3" style="display: none;">
<p><select id="WHAT" name="WHAT" size="1">
<option selected="selected" value="">Select One</option>
<option value="Item 1">Item 1</option>
<option value="Item 2">Item 2</option>
<option value="Item 3">Item 3</option>
<option value="Item 4">Item 4</option>
<option value="Item 5">Item 5</option>
<option value="Item 6">Item 6</option>
<option value="Item 7">Item 8</option>
<option value="Item 9">Item 9</option>
<option value="Item 10">Item 10</option>
<option value="Item 11">Item 11</option>
<option value="Item 12">Item 12</option>
</select></p>
</div>
<div id="show_demo3" style="display: none;">
<p>
<input maxlength="64" name="WHERE" size="30" type="text" value="" />
</p>
</div>
</td>
<td> </td>
</tr>
I want Fancybox to work on my divs - do I need to edit html?
I have some 'item' class divs, which are grey boxes with an image and a caption inside them. When they're clicked, I want them to appear bigger.
I have applied fancybox, but nothing happens. I have added all the relevant files into the html.
Here's the html code:
<div class="container">
<div class="item">
<img src="photo.jpg">
<p>Image caption</p>
</div>
<div class="item">
<img src="photo.jpg">
<p>Image caption</p>
</div>
<div class="item">
<img src="photo.jpg">
<p>Image caption</p>
</div>
<div class="item">
<img src="photo.jpg">
<p>Image caption</p>
</div>
</div>
Submit an input box OR a select box (not both)
I want to have the option for my users to submit a form that they have the option to either use either the select box or the input text box, but not both. Here is my form code:
<!-- Text input-->
<div id="incident-type" class="control-group">
<label class="control-label" for="textinput">Incident Type (Use this box or the common incident box)</label>
<div class="controls">
<input id="textinput" name="incident_type" type="text" class=" form-control">
</div>
</div>
<!-- Select Box -->
<div id="incident-control-box" class="control-group">
<label class="control-label" for="textinput">Common Incidents (Use this box or the incident type box)</label>
<div class="controls">
<select onclick="hideInputBox()" id="textinput incident-type1" name="incident_type" type="text" class=" form-control" >
<option value="blank"></option>
<option value="AFA Commercial">AFA Commercial</option>
<option value="AFA Residential">AFA Residential</option>
<option value="MVA W/Injuries">MVA W/Injuries</option>
<option value="Gas Leak Outside">Gas Leak Outside</option>
<option value="Gas Leak Inside">Gas Leak Inside</option>
<option value="Investigation">Investigation</option>
<option value="Possible Structure Fire">Possible Structure Fire</option>
</select>
</div>
</div>
Then here is my code from my PHP where it gets the input boxes of the form:
$incident_type = $row['incident_type'];
The problem I run into is that I want either one of them to submit depending on what the user chooses to fill out. Currently only the select input works, not the text box input also.
Destroy specific galleria instance among multiple galleries
I have several galleria galleries running in a web page, each in its own div. Galleria.run(#div) is used to run each gallery.
<div id="galleria" class="visible"></div>
<div id="galleria2" class="hidden"></div>
Galleria.run('#galleria',{options})
Galleria.run('#galleria2',{options})
When I collapse a gallery, I want it to be destroyed but I don't know how to retrieve the specific instance.Galleria.get() gives the list of all instances. I want something like.
gallery_array=Galleria.get();
gallery=gallery_array.find('div_id') # Find the specific instance I want to destroy
gallery.destroy();
Is there a way of doing this
Responsive Image Grid with Different Heights and Widths
I need to be able to create a responsive image grid with different image widths, (link to an image below.)
Here's what I have right now.
This ^ fits and looks good on my 27" iMac, but isn't responsive, and I haven't been able to figure out a good solution for it due to the varying heights and widths. Masonry.js didn't work for me as I'm developing this site in Wordpress and the grid is created dynamically. I need to know if there is another option for this. Thanks to all in advance!
Disabling click event of Controls in Table Data
I have a list of controls in a table data which is enclosed in a div tag as the parent tag , I want to disable the click events on my Power On and Power OFF button . Presently If I click the buttons a request is sent from my website to an IOT . I want to disable the click event on these two items .
Here is what my code looks like :
<table class="pure-table pure-table-horizontal" style="width: 90%;">
<thead>
<tr>
<th>#</th>
<th>Device Name</th>
<th>Status</th>
<th>Temperature (° C)</th>
<th align="left">Action</th>
</tr>
</thead>
<tbody>
<% devices.forEach(function(device, i){ %>
<tr>
<td><%= (i + 1) %></td>
<td>
<%= device.name || device.macAddress %>
</td>
<td id="text_<%= device.id %>">
<% if (device.updateInProgress) { %>
<i class="fa fa-spinner fa-spin"></i>
<% } else if (device.powerState == false) { %>
<%= "Powered off" %>
<% } else if (device.startState == true) { %>
<%= "Running" %>
<% } else { %>
<%= "Not running" %>
<% } %>
</td>
<td>
<% if (device.updateInProgress){ %>
N/A
<% } else if (device.powerState) { %>
<div class="pure-g">
<div class="pure-u-1-4">
<%= device.temperature %>
</div>
<!--I tried commenting this to remove temperature edit icon for single device-->
<!--<div class="pure-u-1-4">-->
<!--<i class="fa fa-pencil-square-o" id="set_temp" data-value="<%= device.id %>"></i>-->
<!--</div>-->
</div>
<% } else { %>
N/A
<% } %>
</td>
<td align="left">
<a href='/user/startOff/<%= device.id %>?boxid=<%= id %>'
class="pure-button button-green <%= device.updateInProgress == true ? 'hidden' : device.powerState == false ? 'hidden' : device.startState == false ? 'hidden' : '' %>"
type="button">Start Off</a>
<a href='/user/startOn/<%= device.id %>?boxid=<%= id %>'
class="pure-button button-green <%= device.updateInProgress == true ? 'hidden' : device.powerState == false ? 'hidden' : device.startState == true ? 'hidden' : '' %>"
type="button">Start On</a>
<a href='/user/powerOff/<%= device.id %>?boxid=<%= id %>'
class="pure-button button-warning <%= device.updateInProgress == true ? 'hidden' : device.powerState == true ? '' : 'hidden' %>"
type="button">Power Off</a>
<a href="/user/powerOn/<%= device.id %>?boxid=<%= id %>"
class="pure-button <%= device.updateInProgress == true ? 'hidden' : device.powerState == true ? 'hidden' : '' %>"
type="button">Power On</a>
<a href="/user/deleteDevice/<%= device.id %>?boxid=<%= id %>"
class="pure-button button-error pull-right <%= device.updateInProgress == true ? 'hidden' : '' %>"
type="button ">
<i class="fa fa-times"></i>
</a>
</td>
</tr>
<% }) %>
</tbody>
</table>
This is all running on a Node.js website .
Also ideally this is how the screen looks like with the current code :
I want the display to be exactly the same except the click events on "Power On" and "Power Off " should do nothing .
What I thought was to remove " " which I know is for making a link or a URL active . But I am not able to fit the code without it .
Please help .
How to get a different window's html with javascript
I would like to open a new window using a url, grab its html as a string and display it in the console of the original window.
From How to get element and html from window.open js function with jquery , I tried:
console.log('response', url)
var popup = window.open(url, '_blank', 'width=500,height=500');
popup.onload = function() {
setTimeout(function(){ console.log( 'hi',popup.document.documentElement.outerHTML) }, 2000);
}
The popup window is created, but I don't see the popup's html in the original window's console.
What am I doing wrong?
changing margin-top of element while scrolling ,javascript
i want to attach an element to the bottom of a navbar the navbar is fixed so so it will be in the top when i scroll the problem is how to change the margin-top of that element so its top will be the bottom of the nav bar .. and its bottom is fixed .. (it will be hidden if i scoll a lot ) so the heigth of this element will be smaller when i scroll
here is what i did
$(document).on('scroll', function (e) {
$('.imagebleu').css('opacity', ($(document).scrollTop() / 500));
});
if you need more code i will post it here is the link for the page
http://ift.tt/1LIWzqY
the part that contain that text is the nav bar and the other part is the .imagebleu element they have the same opacity , but because this element is under the navbar the navbar opacity doesn't look the same with it
So i want to add margin that changes by scrolling to fix this element on the bottom of the navbar
thank you very much
Inscription à :
Articles (Atom)