I got this now:
And what I want is like something that when people hover over one tab, they get some sort of animation or something to convince them to click.
Does anyone has a good idea, and maybe even a sample code of it?
lundi 29 juin 2015
Stacking three divs and centering them vertically?
This question may have already been answered, but I didn't see anything regarding it while searching, and I'm having a hard time understanding the many ways of centering div's.
Basically, I'm building a small portfolio site and would like to have it laid out in a two column format. The left column will house my logo, and the right column will have a series of three links, which I would like to stack vertically and then also center. I cannot for the life of me, figure out the CSS to get this to work. Here's what I have so far:
<div class="row main">
<div class="col-xs-6 leftMain">
<img src="img/logo.png" class="logo" alt="myName">
</div>
<div class="col-xs-6 rightMain">
<div class="resume button"><a href="resume.html" class="btn">Resume</a></div>
<div class="portfolio button"> <a href="portfolio.html" class="btn">Portfolio</a></div>
<div class="contact button"><a href="mailto:me@me.com" class="btn">Contact</a></div>
</div>
</div>
And my CSS:
.main {
display: flex;
}
.leftMain {
display: inline-block;
}
.rightMain {
display: inline-block;
}
.logo {
display: table;
margin: 0 auto;
}
.button {
display: table;
margin: 0 auto;
}
This works reasonably well, but the links in rightMain do not center vertically. As most of the solutions I've looked up involve the display property, I figured I may as well just ask the full question, rather than trying to integrate multiple solutions for different centering problems. I plan on making it responsive eventually, having the right column move beneath the left on smaller windows. Any ideas?
Weird gradient border effect
When applying a transparent border over an element with a linear-gradient as the background, I get a weird effect.
Notice the left and right sides of the element don't have the proper colours (they're some way switched) and are weirdly flat.
HTML
<div class="colors">
</div>
CSS
.colors {
width: 100px;
border: 10px solid rgba(0,0,0,0.2);
height: 50px;
background: linear-gradient(to right,
#78C5D6,
#459BA8,
#79C267,
#C5D647,
#F5D63D,
#F08B33,
#E868A2,
#BE61A5);
}
Why is this showing a weird effect on the left and right side of the element, and What can I do about it?
Here is the fiddle: http://ift.tt/1GV54uG
how to make rating bar with font awesome icon?
I want to creat rating bar with font awesome icon. but , I can't make a icon that fill part of that (%) by color. like this image : enter link description here
6 sub-DIV's, one container DIV, Grouped in 3 pairs of 2, left,center,right justified
Was my title strong enough?
I want a DIV that goes a horizontal length of a page, then I want 6 divs inside of that that are grouped in 2 (info, pic) Where the group on the left is fastened to the wall, the group on the right is fastened to the wall, and the group in the center is exactly in the center.
Here's my code so far:
<div class="contactus.container">
<div class="contactus.left">
<div><b>asdf</b></div>
<div><b>sadf</b></div>
<div>asdf</div>
<div>sadf</div>
<div>asdf</div>
<div>asdf</div>
<div>af</div>
</div>
<div class="content" style="display:inline-block" >
<img align="left" alt="pic" class="bold"
src="profilepic.jpg"
style="width: 125px; height: 125px;" vspace="0" />
</div>
<div class="contactus.center">
<div><b>asdf</b></div>
<div><b>sadf</b></div>
<div>asdf</div>
<div>sadf</div>
<div>asdf</div>
<div>asdf</div>
<div>af</div>
</div>
<div class="content" style="display:inline-block">
<img align="left" alt="pic" class="bold"
src="profilepic.jpg"
style="width: 125px; height: 125px;" vspace="0" />
</div>
<div class="contactus.right">
<div><b>asdf</b></div>
<div><b>sadf</b></div>
<div>asdf</div>
<div>sadf</div>
<div>asdf</div>
<div>asdf</div>
<div>af</div>
</div>
<div class="content" style="display:inline-block;">
<img align="right" alt="pic" class="bold"
src="profilepic.jpg"
style="width: 125px; height: 125px;" vspace="0" />
</div>
<div style="clear:both;"></div>
</div>
And here's the CSS:
.contactus.container {
width:100%;
text-align:center;
}
.contactus.left {
float:left;
width:100px;
}
.contactus.center {
display: inline-block;
margin:0 auto;
width:100px;
}
.contactus.right {
float:right;
width:100px;
}
.content {
display: inline-block;
vertical-align: top;
Getting al ittle frustrated now. All it does is have a line down the left side. All 6 divs.
html - play gif once on hover and play reversed on mouseout
I want to have a GIF that plays once when you mouse over it and pauses on the last frame, and then when you move the mouse off the image it should play backwards and pause on the first frame.
I have a static image for the first and last frame, as well as separate animated GIFs playing the animation forwards and backwards, I just have no clue how I would go about programming this.
Optimally I would just use CSS but from what I know it doesn't seem possible without js/jquery, however if anyone has any ideas it would be greatly appreciated.
How to Hide particular div tag using media query, CSS, Javascript, Jquery for tablet device
How to Hide particular div tag using media query, CSS, Javascript, Jquery for tablet device.
I am trying to hide only second div inside [class="row grid-container-960"]...
<div class="row grid-container-960">
<div class="span3 col-md-3 col-sm-3 col-xs-12"></div>
<div class="span3 col-md-3 col-sm-3 col-xs-12"></div>
<div class="span3 col-md-3 col-sm-3 col-xs-12"></div>
<div class="span3 col-md-3 col-sm-3 col-xs-12"></div>
</div>
@media (max-width: 1024px) {
.r-footer-propertylinks .row div {
display:none
}
}
Can someone help me with my Javascript code? No jQuery
Please no jQuery.
I created a game through a tutorial and I want to make some changes. How the game already works is that the user clicks on the shape when it appears and then the shape will reappear within a random time between 0 - 1 second. When the user clicks the shape, their response time is displayed.
Here is what I wanna do:
- Make the shape disappear after so many seconds (probably 3s at first.)
- Add a loop. After every 10-15 rounds, the shape will disappear faster.
I tried using another setTimeout() to make the shape disappear and placed it in different places within the code. But it would either work only on the first time the shape appears if I wait the 3s, or work throughout but disable me from clicking the shape.
For the loop, I tried a for loop, then a while loop, and even a do while. But the game would either freeze on load, or it'll just iterate those 10 times really fast, not allowing the user to click the shape.
Here is the entire html/css/javascript of the basic game. Please focus on the functionality of the code and not the naming convention or the fact that its all internal. I am aware that using i as a variable is bad practice and that it is most likely best to use external sheets and js files. This is straight from the tutorial and the code was kept on one page so it would be easier for those to just copy the entire thing and test it without saving other files.
<!doctype html>
<html>
<head>
<title>Reaction Game</title>
<style>
body{
font-family:Verdana, Geneva, sans-serif;
}
#box{
width:100px;
height:100px;
background-color:red;
display:none;
position:relative;
}
.bold{
font-weight:bold;
}
</style>
</head>
<body>
<h1>Test your reactions</h1>
<p>Click on the boxes and circles as quickly as you can!</p>
<p class="bold">Your time: <span id="time">0</span>s</p>
<div id="box"></div>
<script type="text/javascript">
function getRandomColor(){
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++){
color+=letters[Math.round(Math.random() * 15)];
}
return color;
}
var clickedTime;
var createdTime;
var reactionTime;
function makeBox(){
var time=Math.random();
time=time*1000;
setTimeout(function(){
if(Math.random()>0.5){
document.getElementById("box").style.borderRadius="100px";
} else{
document.getElementById("box").style.borderRadius="0px";
}
var top=Math.random();
top=top*300;
var left=Math.random();
left=left*800;
document.getElementById("box").style.top=top+"px";
document.getElementById("box").style.left=left+"px";
document.getElementById("box").style.backgroundColor=getRandomColor();
document.getElementById("box").style.display="block";
createdTime=Date.now();
}, time);
}
document.getElementById("box").onclick=function(){
clickedTime=Date.now();
reactionTime=(clickedTime-createdTime)/1000;
document.getElementById("time").innerHTML=reactionTime;
this.style.display="none";
makeBox();
}
makeBox();
</script>
</body>
</html>
Neither media query nor meta viewport working
i am creating a blogger template and i want to make it responsive...
i have added viewport already.
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
what i have done so far is :
@media only screen and (min-width:768px) and (max-width:1023px){ having css code in btwn}
@media only screen and (max-width:767px){}
@media only screen and (max-width:479px){}
i tried this..it worked very well on my desktop application (chrome). but when i tested it on a mobile device ...it didn't worked neither on tablet.
then i made some changes , and used diff. values
@media only screen and (min-width:768px) and (max-width:1023px){}
@media only screen and (min-width:481px) and (max-width:767px){}
@media only screen and (min-width:320px) and (max-width:480px) {}
this did some help but when i tested it on some more devices( iphone 6, 6+, samsung e7, motorola atrix 2 ,ipad3) out of these , it worked only on samsung e7
then i searched some responsive sizes..and found to use pixel ratio rather than width..
//for tabs
@media
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1),
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1),
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-width: 800px) and (max-device-width: 1280px),
only screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332),
only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1.5),
{
//For mobiles
@media
only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3),
only screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2),
only screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3),
only screen and (min-device-width: 320px;),
{ }
this too... didn't worked. later i searched on stackoverflow and tried this..(attached jquery in document )
var isMobile = false; //initiate as false
// device detection
if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent)
|| /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) isMobile = true;
if(isMobile)
{
console.log('You are using a mobile device!');
$('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');
}
else
{
console.log('You are not using a mobile device!');
}
</script>
now i don't know what to do...or how to make webpage responsive.please help
royalSlider: How to De- and Activate slides
Resources
I am using royalSlider as a plugin. Here is a quick link to the documentation & API.
On my site the slider works as height: 100%; width: 100% fullscreen slider.
Content Structure
The structure of my site is quite simple: I have slides that I use as cover, lets call them .cover, each followed by a slide containing more information. Lets call them .sub.
Content Cover Nr. 1
Sub Content Nr. 1
Content Cover Nr. 2
Sub Content Nr. 2
Content Cover Nr. 3
Sub Content Nr. 3
Content Cover Nr. 4
Sub Content Nr. 4
If it is easier to understand, you can check the first four slides of the live site right here.
What I would like to do
Every slide containing Sub Content should be disabled (= not visible). Again, lets call them .sub.
On every .cover-Slide there is a button, which should toggle its .sub-Slide to be enabled or disabled again. Like .slideToggle for the whole slide.
First approaches
First of initialize slider as usual with starting slides and save it's object.
var sliderInstance = $('.royalSlider').royalSlider({
optionname: 'optionvalue'
}).data('royalSlider');
There is appendSlide public method, it accepts two parameters - html slide object, and optional index where slide should be added. If you don't pass index, slide will be added to the end.
// Adding simple slide after 3rd image:
sliderInstance.appendSlide('<div class="rsContent">Quicktest</div>', 3);
// remove 4th slide:
sliderInstance.removeSlide(3);
I have although written some hints I think could be useful inside the following jsfiddle demo, but I am not able to think outside the box I am stuck in.
» Minified JS Fiddle Demo to work with
» royalSlider Documentation & API
CSS - Page alignment across devices
I am trying to have a consistent display across devices but I my CSS skills are not up to scratch.
The text on a mobile device is showing up as centered, but I cannot see most of the screen, nor can I scroll to view the other part of the page. I am not quite sure how much of my CSS code would be needed to show (although I think it is probably within the media queries block), so I am posting the parts of the stylesheet that I think are relevant. Thanks for your help.
11.0 Content
--------------------------------------------------------------*/
/*--------------------------------------------------------------
11.1 Site Content
--------------------------------------------------------------*/
.site-content {
width: 768px;
margin: 0 auto 0 auto;
}
/*--------------------------------------------------------------
11.2 HEntry
--------------------------------------------------------------*/
.sticky {
}
.hentry {
background: #fff;
border: 1px solid #f2f2f2;
margin: auto;
padding: 0px 50px 0px;
position: relative;
float: left;
}
.entry-media {
position:relative;
}
.entry-header {
margin: 50px 0;
padding: 0 50px;
text-align: center;
}
.entry-title {
font-size: 40px;
font-size: 4.0rem;
margin: 0 0 10px;
}
.error-404,
.no-results {
background: #fff;
border: 1px solid #f2f2f2;
padding: 0;
}
.page-header {
background: #f07677;
color: #fff;
padding: 25px;
text-align: center;
}
.page-title {
font-size: 18px;
margin: 0;
}
.entry-title a,
.entry-title a:visited,
.page-title a,
.page-title a:visited {
color: #333;
}
.entry-title a:hover,
.entry-title a:focus,
.entry-title a:active,
.page-title a:hover,
.page-title a:focus,
.page-title a:active {
color: #999;
}
.byline,
.updated {
display: none;
}
.single .byline,
.group-blog .byline {
display: inline;
}
.post-thumbnail {
text-align: center;
}
.post-thumbnail-backfill {
background: #f07677;
height: 80px;
}
.entry-content,
.entry-summary {
margin-bottom: 50px;
padding: 0 50px;
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
.page-content {
margin-right: auto;
margin-left: 0px;
margin-bottom: 50px;
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
/*--------------------------------------------------------------
11.3 Page Links
--------------------------------------------------------------*/
.page-links {
clear: both;
margin: 0 0 1.5em;
}
.format-gallery .page-links {
margin: 1.5em 0;
}
.page-links a,
.page-links > span {
background: #fff;
border: 1px solid #f07677;
border-radius: 4px;
display: inline-block;
margin: 0 2px 0 0;
padding: 2px 8px;
text-align: center;
}
.page-links a {
background: #f07677;
border: 1px solid #f07677;
color: #fff;
text-decoration: none;
}
.page-links a:hover {
background: #fff;
border: 1px solid #f07677;
color: #333;
}
.page-links > .page-links-title {
border: none;
margin: 0;
padding: 0 7px 0 0;
}
/*--------------------------------------------------------------
11.4 More Link
--------------------------------------------------------------*/
.more-link,
.more-link:visited {
padding: 6px 18px;
border: 1px solid #f07677;
border-radius: 4px;
display: inline-block;
margin-top: 10px;
}
.more-link:hover,
.more-link:focus,
.more-link:active {
background: #f07677;
color: #fff;
}
/*--------------------------------------------------------------
11.5 Entry Meta
--------------------------------------------------------------*/
.entry-meta {
color: #999;
}
.entry-meta a,
.entry-meta a:visited {
color: #999;
}
.entry-meta a:hover,
.entry-meta a:focus,
.entry-meta a:active {
color: #999;
}
.entry-meta-footer {
font-size: 13px;
padding: 0 50px;
}
.entry-meta-footer a,
.entry-meta-footer a:visited {
color: #f07677;
}
.entry-meta-footer a:hover,
.entry-meta-footer a:focus,
.entry-meta-footer a:active {
color: #fa7a7a;
}
.cat-links,
.tags-links,
.comments-link,
.edit-link {
margin-right: 10px;
}
/*--------------------------------------------------------------
11.6 Media Elements
--------------------------------------------------------------*/
.hentry .mejs-container {
margin: 0 0 18px;
}
.hentry .mejs-mediaelement,
.hentry .mejs-container .mejs-controls {
background: #333;
}
.hentry .mejs-controls .mejs-time-rail .mejs-time-loaded,
.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
background: #fff;
}
.hentry .mejs-controls .mejs-time-rail .mejs-time-current {
background: #f07677;
}
.hentry .mejs-controls .mejs-time-rail .mejs-time-total,
.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
background: rgba(255,255,255,.33);
}
.hentry .mejs-container .mejs-controls .mejs-time {
padding-top: 9px;
}
.hentry .mejs-controls .mejs-time-rail span,
.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
border-radius: 0;
}
.hentry .mejs-overlay-loading {
background: transparent;
}
/*--------------------------------------------------------------
11.7 Gallery
--------------------------------------------------------------*/
.gallery {
}
.gallery-item {
float: left;
margin: 0 4px 4px 0;
overflow: hidden;
position: relative;
}
.gallery-columns-1 .gallery-item {
max-width: 100%;
}
.gallery-columns-2 .gallery-item {
max-width: 48%;
max-width: -webkit-calc(50% - 4px);
max-width: calc(50% - 4px);
}
.gallery-columns-3 .gallery-item {
max-width: 32%;
max-width: -webkit-calc(33.3% - 4px);
max-width: calc(33.3% - 4px);
}
.gallery-columns-4 .gallery-item {
max-width: 23%;
max-width: -webkit-calc(25% - 4px);
max-width: calc(25% - 4px);
}
.gallery-columns-5 .gallery-item {
max-width: 19%;
max-width: -webkit-calc(20% - 4px);
max-width: calc(20% - 4px);
}
.gallery-columns-6 .gallery-item {
max-width: 15%;
max-width: -webkit-calc(16.7% - 4px);
max-width: calc(16.7% - 4px);
}
.gallery-columns-7 .gallery-item {
max-width: 13%;
max-width: -webkit-calc(14.28% - 4px);
max-width: calc(14.28% - 4px);
}
.gallery-columns-8 .gallery-item {
max-width: 11%;
max-width: -webkit-calc(12.5% - 4px);
max-width: calc(12.5% - 4px);
}
.gallery-columns-9 .gallery-item {
max-width: 9%;
max-width: -webkit-calc(11.1% - 4px);
max-width: calc(11.1% - 4px);
}
.gallery-columns-1 .gallery-item:nth-of-type(1n),
.gallery-columns-2 .gallery-item:nth-of-type(2n),
.gallery-columns-3 .gallery-item:nth-of-type(3n),
.gallery-columns-4 .gallery-item:nth-of-type(4n),
.gallery-columns-5 .gallery-item:nth-of-type(5n),
.gallery-columns-6 .gallery-item:nth-of-type(6n),
.gallery-columns-7 .gallery-item:nth-of-type(7n),
.gallery-columns-8 .gallery-item:nth-of-type(8n),
.gallery-columns-9 .gallery-item:nth-of-type(9n) {
margin-right: 0;
}
.gallery-caption {
background-color: rgba(0, 0, 0, 0.7);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #fff;
font-size: 12px;
line-height: 1.5;
margin: 0;
max-height: 50%;
opacity: 0;
padding: 6px 8px;
position: absolute;
bottom: 0;
left: 0;
text-align: left;
width: 100%;
}
.gallery-caption:before {
content: "";
height: 100%;
min-height: 49px;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.gallery-item:hover .gallery-caption {
opacity: 1;
}
.gallery-columns-7 .gallery-caption,
.gallery-columns-8 .gallery-caption,
.gallery-columns-9 .gallery-caption {
display: none;
}
/*--------------------------------------------------------------
11.8 Entry Format
--------------------------------------------------------------*/
.entry-format {
color: #fff;
}
.entry-format-icon,
a.entry-format-icon,
a.entry-format-icon:visited {
background: #f07677;
bottom: -25px;
border-radius: 50%;
-webkit-box-shadow: 0 0 0 6px #ffffff;
box-shadow: 0 0 0 6px #ffffff;
color: #fff;
font-size: 25px;
line-height: 55px;
left: 0;
position: absolute;
right: 0;
margin: 0 auto;
padding: 0;
text-align: center;
width: 55px;
height: 55px;
z-index: 4;
-webkit-transition: background .5s ease;
-moz-transition: background .5s ease;
-ms-transition: background .5s ease;
-o-transition: background .5s ease;
transition: background .5s ease;
}
.entry-format-icon:hover,
a.entry-format-icon:hover {
background: #fff;
color: #f07677;
}
.entry-format-icon:focus,
.entry-format-icon:active,
a.entry-format-icon:focus,
a.entry-format-icon:active {
background: #f07677;
color: #fff;
}
.entry-format-icon > i {
}
/*--------------------------------------------------------------
11.9 Asides
--------------------------------------------------------------*/
.blog .format-aside .entry-title,
.archive .format-aside .entry-title {
display: none;
}
/*--------------------------------------------------------------
11.10 Comments
--------------------------------------------------------------*/
#comments {
margin-top: 50px;
}
.comments-area-wrapper {
background: #fff;
border-bottom: 3px solid #f2f2f2;
margin-bottom: 50px;
padding: 0;
}
.no-comments-wrapper {
background: #f0f0f0;
border-bottom: 1px solid #f2f2f2;
font-size: 18px;
margin-top: -50px;
padding: 25px;
text-align: center;
}
/* Comments Title */
.comments-title {
background: #f07677;
color: #fff;
font-size: 18px;
margin: 0;
padding: 25px;
text-align: center;
}
/* Comment Navigation */
#comment-nav-above {
margin: 0;
padding: 50px 50px 0;
}
#comment-nav-below {
margin: 0;
padding: 0 50px 50px;
}
/* Comment List */
.comment-list {
list-style: none;
margin: 0 0 50px;
padding: 50px 50px 0;
}
.comment-list .children {
list-style: none;
}
/* Comment Body */
.comment-list .comment-body {
border-bottom: 1px solid #f2f2f2;
margin: 0 0 25px;
position: relative;
padding: 0 0 25px;
}
.comment-list .pingback .comment-body {
padding-left: 0;
}
.comment-list .bypostauthor .comment-body {
background: #fafafa;
border-bottom: 3px solid #f07677;
padding: 25px;
}
.comment-list .comment-body {
padding-left: 83px;
}
.comment-list .children .comment-body {
padding-left: 54px;
}
.comment-list .bypostauthor .comment-body {
padding-left: 108px;
}
.comment-list .children .bypostauthor .comment-body {
padding-left: 79px;
}
.comment-list .comment-author .avatar {
border: 1px solid #f2f2f2;
padding: 2px;
position: absolute;
top: 0;
left: 0;
}
.comment-list .bypostauthor .comment-author .avatar {
top: 25px;
left: 25px;
}
.comment-list .comment-author .avatar {
width: 68px;
height: 68px;
}
.comment-list .children .comment-author .avatar {
width: 39px;
height: 39px;
}
.comment-list .comment-meta {
font-size: 12px;
margin-bottom: 15px;
text-transform: uppercase;
}
.comment-list .comment-content {
margin-bottom: 15px;
word-wrap: break-word;
}
.comment-list .reply {
font-size: 12px;
text-transform: uppercase;
}
.comment-list .comment-author .fn {
font-weight: 900;
}
.comment-list .comment-author .fn a,
.comment-list .comment-author .fn a:visited {
color: #333;
}
.comment-list .comment-author .fn a:hover,
.comment-list .comment-author .fn a:focus,
.comment-list .comment-author .fn a:active {
color: #999;
}
.comment-list .says {
display: none;
}
.comment-list .edit-link {
margin-left: 15px;
}
.comment-list .comment-awaiting-moderation {
color: #f07677;
margin-top: 10px;
}
/* Comment Form */
.comment-respond {
background: #fff;
border-bottom: 3px solid #f2f2f2;
margin-bottom: 50px;
padding: 50px 50px;
position: relative;
}
.comment-list .comment-respond {
padding: 0 0 25px;
}
.comment-respond .comment-reply-title {
margin: 0 0 10px;
}
.comment-respond .logged-in-as {
}
.comment-respond .comment-notes,
.comment-respond .logged-in-as,
.comment-respond .form-allowed-tags,
.comment-respond .form-allowed-tags code {
font-size: 13px;
}
.comment-respond .comment-form label {
display: block;
}
.comment-respond .required {
color: #c0392b;
}
.comment-respond #cancel-comment-reply-link {
color: #c0392b;
font-size: 14px;
position: absolute;
text-transform: uppercase;
top: 0;
right: 0;
}
/*--------------------------------------------------------------
15.0 Media Queries
--------------------------------------------------------------*/
/* For Extra Samll Devices */
@media (max-width: 768px) {
/* Site brand */
.site-branding {
padding: 25px 0;
}
.site-title {
font-size: 28px;
font-size: 2.8rem;
}
.site-description {
font-size: 14px;
font-size: 1.4rem;
}
/* Site navigation */
.main-navigation {
margin-bottom: 25px;
}
/* Mobile Menu */
.js .primary-menu {
display: none;
}
.js .slicknav-menu,
.js .menu-toggle-wrapper {
display: block;
}
/* Content */
.hentry {
max-width: 768px;
margin: 0 auto 0 auto;
padding: 25px 0;
}
.entry-header {
margin-bottom: 25px;
padding: 0 25px;
}
.post-thumbnail {
margin-bottom: 25px;
}
.entry-content,
.entry-summary {
margin-bottom: 25px;
padding: 0 25px;
}
.page-content {
margin-right: auto;
margin-left: auto;
margin-bottom: 25px;
padding: 25px 25px 0;
}
.entry-meta-footer {
padding: 0 25px;
}
/* Site Info */
.site-info {
padding: 25px 0;
}
/* Content Sidebar Wrapper */
.site-content {
padding: 25px 0;
}
/* Comments */
#comments {
margin-top: 25px;
}
.comments-area-wrapper {
margin-bottom: 50px;
}
.no-comments-wrapper {
margin-top: -25px;
}
/* Comment Navigation */
#comment-nav-above {
margin: 0;
padding: 25px 25px 0;
}
#comment-nav-below {
margin: 0;
padding: 0 25px 25px;
}
/* Comment List */
.comment-list {
margin: 0 0 25px 0;
padding: 25px 25px 0;
}
/* Comment Form */
.comment-respond {
margin-bottom: 25px;
padding: 25px 25px;
}
/* Infinite Scroll */
#infinite-handle,
.infinite-loader {
margin-bottom: 25px;
}
}
Header height in Wordpress
I give up! For the past 3hrs, I was trying to figure out how to change the header height, in one of the Wordpress themes.
Here is the demo: http://ift.tt/1HqVUrk
So far I have only found this rule in style.css on line 287:
.bg-image {
height: 210px;
width: 100%;
}
BUT, there is something else that is overrides this, because if I delete height completely, the header still remains the same height...
I'm completely lost, please help!
Cheers
Automatic scroll to top on „next page"
Here's my issue: When I resize the browser (approx. 320 px width), scroll down and click on the icon (green arrow) „next“ the scroll bar stays at the bottom of the page. What I want to achieve is something like
$(document).ready(function () {
$('html, body').animate({ scrollTop: 0 }, 'slow');
});
so the next page will autoscroll to top, but I've tried with no success. Is there any solution?
Thank you!
Twitter Bootstrap not responsive on Mobile
I am making my first website with bootstrap and while i was working on it from my desktop everything was fine.
When i transferred it over to FTP and viewed it on my mobile i noticed the responsiveness is all messed up. The navbar button cannot be seen and i have to move the page to the right to see it and there is also some white space there which makes no sense.
When i view the website on desktop and resize it everything is fine.
I have tried :
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
You can view the website on mobile at http://ift.tt/1LRfP2e and see the problem for yoursevles.
Any help will be greatly appreciated as this is driving me nuts. Thanks.
Safari CSS Circles Sizing Issue
I have a series of checkboxes that use css to appear as circles that then animate into checkmarks when clicked.
They seem to always look the same across all browsers - except that 2 Safari browsers in my office make the circles look gigantic. I don't understand it - all the computers in our office have the latest updates and run the same version of OSX - yet only these two computers make the circles look huge while the other 6 look normal size.
This is the script in action: http://bit.ly/1GVKPNu
The is the css:
/* basic css */
input[type=checkbox] { display:none; }
label, p { padding-left:50px; }
#check-awesome { position:relative; }
/* checkbox css */
#check-awesome { margin: 20px; }
label { cursor:pointer; }
label span { display:block; position:absolute; left:0;
-webkit-transition-duration:2s; -moz-transition-duration:2s; transition-duration:2s;
}
label .box {
font-size: 2px;
text-indent: -9999em;
border-top: 2em solid #5555ff;
border-right: 2em solid #5555ff;
border-bottom: 2em solid #5555ff;
border-left: 2em solid #5555ff;
-webkit-transition:1s; -moz-transition:1s; transition:1s;
}
.box,
.box:after {
border-radius: 50%;
width: 11em;
height: 11em;
}
label:hover .box{
border-top: 2em solid #f70000;
border-right: 2em solid #ff8a8a;
border-bottom: 2em solid #ff8a8a;
border-left: 2em solid #f70000;
-webkit-animation: load 0.7s infinite linear;
animation: load 0.7s infinite linear;
}
label .check {
top: -4px;
left: 10px;
width: 12px;
height: 24px;
border:2px solid #0f9d58;
border-top: none;
border-left: none;
opacity:0;
z-index:888;
-webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); transform:rotate(360deg);
-webkit-transition:0.8s; -moz-transition:0.8s; transition:0.8s;
}
/* handling click events */
/* when checkbox is checked */
input[type=checkbox]:checked ~ label .box {
opacity:0;
-webkit-transform :scale(1.2) rotate(360deg);
-moz-transform :scale(1.2) rotate(360deg);
transform :scale(1.2) rotate(360deg);
}
input[type=checkbox]:checked ~ label .check {
opacity:1;
-webkit-transform :scale(1) rotate(45deg);
-moz-transform :scale(1) rotate(45deg);
transform :scale(1) rotate(45deg);
}
@-webkit-keyframes load {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
Two col-md-6 not work with responsive
Left is col-md-6 is tekst with font size 50px; and right is responsive picture col-md-6. Text is not responsive.Text can not be adapted to the size of the screen How to fix it.
Force divs on same line with expanded text
I need this this behavior :
[Short title text.txt []]
[Little longer title text.txt []]
[Longer title text with text text text ...[]]
[Longer title text with text tex ...[icon 1]]
[Longer title text with ...[icon 1, icon 2]]
[Short title text.txt [icon 1, icon 2]]
- Dynamic length of title
- Dynamic number of end icons
- Everytime when text overflow add '...'
Purpose is, that there is title of file, when title is too long, add '...' on end, on end of title can be icon indicators (multiple, currently 0-2) which must be on end of text, not on end of line.
I think that is maybe similar like this, but any of solution was not applicable for this : How to force inline divs to stay on same line?
Thank you very much.
Target CSS transition at pseudo-element "Arrow"?
I have a DIV with an "arrow" at the bottom, not unlike a speech bubble from a comic book, which appears on the hover state:
The arrow is created with the :after and :before pseudo elements.
I have a transition for the hover for the border color and the box shadow.
My problem is that the "arrow" just "appears". No fade like the other items, but I can't figure out how to target the "arrow". "All" does not look right either.
Ideally, I'd love to have a delay on the arrow and a simple fade or wipe.
Here's the CSS:
.item-selector-button {
position: relative;
text-align: center;
cursor: pointer;
border: 1px solid #cecece;
padding: 15px;
border-radius: 0;
color: #000;
width: 160px;
height: 120px;
transition: all ease-in-out 0.1s, box-shadow ease-in-out 0.1s;
}
.item-selector-button .title {
color: #3e53a4;
font-size: 12px;
margin: 0;
padding-top: -3px;
font-family: "PrecisionSans_W_Md", "Helvetica Neue", Arial, sans-serif;
}
.item-selector-button .divider {
height: 1px;
width: 20px;
background-color: #cecece;
margin: 4px auto 10px;
}
.item-selector-button .image {
background: #fff url("../images/box.png") center center no-repeat;
width: 64px;
height: 57px;
margin: 4px auto;
}
.item-selector-button:hover, .item-selector-button.hover {
padding: 14px;
}
.item-selector-button:hover:after, .item-selector-button.hover:after {
content: "";
position: absolute;
bottom: -12px;
left: 68px;
border-width: 12px 12px 0;
border-style: solid;
border-color: #fff transparent;
transition-delay: 0.3s;
}
.item-selector-button:hover:before, .item-selector-button.hover:before {
content: "";
position: absolute;
bottom: -15px;
left: 65px;
border-width: 15px 15px 0;
border-style: solid;
border-color: #3e53a4 transparent;
transition-delay: 0.3s;
}
.item-selector-button:active, .item-selector-button.active {
border-width: 2px;
border-color: #3e53a4;
background-color: #3e53a4;
}
.item-selector-button:active:before, .item-selector-button.active:before {
content: "";
position: absolute;
bottom: -15px;
left: 65px;
border-width: 15px 15px 0;
border-style: solid;
border-color: #3e53a4 transparent;
transition-delay: 0.3s;
}
.item-selector-button:active .title, .item-selector-button.active .title {
color: #fff;
}
.item-selector-button:active .divider, .item-selector-button.active .divider {
background-color: #fff;
}
.item-selector-button:active .image, .item-selector-button.active .image {
background-color: #3e53a4;
}
.item-selector-button:active:hover, .item-selector-button.active:hover {
padding: 15px;
box-shadow: none;
}
.item-selector-button:active:hover:after, .item-selector-button.active:hover:after {
content: "";
position: absolute;
bottom: -12px;
left: 68px;
border-width: 12px 12px 0;
border-style: solid;
border-color: #3e53a4 transparent;
transition-delay: 0.3s;
}
.item-selector-button.disabled {
pointer-events: none;
cursor: not-allowed;
}
.item-selector-button.disabled .title {
color: #c3c3c3;
}
.item-selector-button.disabled .image {
background-image: url("../images/box-disabled.png");
}
.item-selector-button.disabled:hover {
padding: 15px;
border: 1px solid #cecece;
box-shadow: none;
}
scrolltofixed - limit next item
scrolltofixed plugin does not seem to be changing to the next item in the list. See code below: http://ift.tt/1HtOSDZ
var learningObjectives = $('.learning-objective-header');
learningObjectives.each(function(i) {
var learningObjective = $(learningObjectives[i]);
var next = learningObjectives[i + 1];
learningObjective.scrollToFixed({
marginTop: 137,
limit: function() {
var limit = 0;
if (next) {
limit = $(next).offset().top - $(this).outerHeight(true);
}
return limit;
}
});
});
Code in CSS Files is on One Line?
I am collaborating with Senior Developers and quite embarrassed to ask why the code in all the .css files is on one line?! At first I thought it was minified but when I went to unminify it it said Unrecognized format. How do I work with these files? As far as I can see it's ONLY the .css files.
JavaFX Tab fit full size of header
I want the tabs in my tabpane to fit the complete size of the tabpane which they are in. So basically there shall be no header area visible, everything should be covered by the tabs.
I have 2 problems here:
- How can I make the tabs dynamically fit the width of the tabpane?
- How can I fit them to the correct height, and remove the little spaces between the tabs? I suppose this is done via css, but I don't quite know how.
greets
Smaller `Input` in React-Bootstrap
How can I make smaller Input?
Here is a default syntax:
<Input type='text' value='' placeholder='Enter Entity'/>
Which would result in:
Unfortunately, unlike buttons, 'bsSize='xsmall' does not work in this case. Any idea how to make them smaller? (like buttons here)
Basic CSS Help - Removing a shape
I'm trying to disable the triangles above the element labels via css. To view these, press a link, (hear, see, savor) There is dotted line and text. On the text there is a little red triangle/arrow that is not centered.I have done it successfully for the menus, but not the element labels. The website in question is: tedmartinez.com
.content-title span:before {
display: none;
}
.content-title span:before {
content: none;
}
span.content-title {
display:none;
}
span {
display:none;
}
.content-title span:before {
content: none;
}
#content-title span:before {
content: none;
}
This code above does not work for disabling it on the element/content titles.
/*removing all arrows and triangles from Tripod*/
nav.main-menu > ul > li.selected:before, nav.main-menu > ul > li.active:before {
content: none;
}
nav.main-menu>ul>li:last-child:after{
content: none;
}
.sf-menu > li:hover > ul:before,
.sf-menu > li.sfHover > ul:before {
content: none;
}
nav.main-menu > ul > li:before {
content: none;
}
.widget h5.widget-title span:before {
content: none;
}
#reply-title span:before, #comments-title span:before, .related-title span:before {
content: none;
}
/*tripod menu arrows while active*/
nav.main-menu > ul > li.selected:before, nav.main-menu > ul > li.active:before {
content: none;}
/*tripod menu arrows while hover*/
nav.main-menu > ul.sf-menu li:hover:before, nav.main-menu > ul.sf-menu li.sfHover:before{
content: none;}
This worked for disabling it on the menu.
That doesn't work. When I edit the HTML, just under inspect element in my browser, if I delete the span tags it works. Also, I want to center the text for the element labels. Go to the savor page to see. I want the savor to be on one line, and then a moment to be on the other, while remaining center. How can I do so? Thank you so much!
C#/Html Survey Quiz Logic
I had to change the tags used for question answers to 's since we wanted the entire area to be clickable. As I understand, this means that the value that we used to assign to the inputs can no longer be retrieved with Request.Form[]. So, i instead set up onclick html methods for each question that submits the questions value in the function like this:
<div id="Question1" style="display:normal;">
<p class="QuizQuestion">Question text......</p>
<p>
<button class="QuizButton" type="button" name="Q1" value="1" onclick="ShowHide('Question1', 'Question2'), Q1Log(1);" > Answer1 Text..</button>
</p>
<p><button class="QuizButton" type="button" name="Q1" value="2" onclick="ShowHide('Question1', 'Question2'), Q1Log(2);" >Answer2 Text.....</button>
</p>
At the bottom of my page I have the hiddent field that will contain the answer value:
My Javascript is this:
<script type="text/javascript">
function Q1log(Answer) {
document.getElementById(Answer1) = Answer;
}
</script>
And then I try to retreive this Javascript variable when I call the results function when the submit button is pressed:
public string Results(string Answer1)
{
if (Answer1== "1")
{
AnswerTally++;
}
}
This isn't working and the tallies remain at their initial values. Can anyone suggest an improvement? The buttons need to be entirely clickable while still being able to contain the css class with the text inside of the button.
Calculate php mysql results sum dynamically
I have a table with product price model cost stock etc, to make it easier I calculate the total customer pay for for each product like this
<?php echo number_format($show['quantity'] * $show['product_price'],0,',','.'); ?>
I need to show the total sum of this calculation but as you can see they are calculared in PHP real time. Is there a way to do it?
Here is the complete code
<?php
$result=mysqli_query($database,"SELECT * FROM `products` order by `category` ASC");
$rows=mysqli_num_rows($result);
if(mysqli_num_rows($result)>0){
?>
<table class="sales">
<tr>
<td>Quantity</td>
<td>Product Cost</td>
<td>Customer Pays</td>
</tr>
<?php if($rows){$i=0;while($show=mysqli_fetch_assoc($result)){?>
<tr>
<td><?php echo number_format($show['quantity'],0,',','.'); ?></td>
<td><?php echo number_format($show['product_cost'],0,',','.'); ?></td>
<td><?php echo number_format($show['quantity'] * $show['product_cost'],0,',','.'); ?></td>
</tr>
<?php }}?>
</table>
TOTAL CUSTOMER PAY FOR ALL PRODUCTS = EXAMPLE $10.234
If there are 5 different products in the results with different prices and different Customer Pays I need to sum all those Customer Pays and show here
<?php }else{?>
No products to show
<?php }?>
Foundation Button Groups plain html and ng-repeat different results
I upgrades my Foundation version from 5.3.3 to 5.5.2. Everything works great, expect some elements like button groups. Here is an example.
<div class="row">
<div class="small-6 columns">
<ul class="button-group even-2">
<li ng-repeat="i in [1, 2]">
<a href="#" class="button tiny">{{i}}</a>
</li>
</ul>
<ul class="button-group even-2">
<li><a href="#" class="button tiny">1</a></li>
<li><a href="#" class="button tiny">1</a></li>
</ul>
</div>
</div>
This two methods will create different results. The Angular ng-repeat directive will create an smaller result. How can this happen?
I created some reproduce able example. The first is the non working example.
Example 1: http://ift.tt/1SYL8wj Foundation 5.5.2
The second example works as expected, but with an older Foundation version.
Example 2: http://ift.tt/1SYL8wl Foundation 5.3.3
The Angular version has not changed. Have someone an idea how to fix this?
Even examples without the even-* class will create different results
Cheers.
Why won`t my bootstrap site show right on iPad and mobil device. It won`t fall back into center position after touch to the left side
I am trying to build my first website with bootstrap. However, when I view it on iPad and Mobil device. And I touch slide the webpage to the left side of the screen, it will not fall back to center position. However, when sliding to the right side if falls back to center as it should.
also i should also say, i dont use any bootstrap media queries. dont know how yet.
I made a picture to illustrated the problem picture link
Kind Regards
Thomas
How to get two HTML buttons spaced horizontally
I need to get two HTML buttons horizontally with about 10/15 pixels space between them in the top right corner of the screen.
I tried many attempts but to no avail.
Can someone help?
Thanks
Responsive width css triangle with gradient
I'm trying to build a triangle with a gradient that is 100% width of it's parent. The parent element will be in a row of three columns and will be responsive. I did the the gradient part by making a solid color triangle and putting a transparent gradient over the top of it. The problem is that with this method I need to put a specific number for the width of the triangle. This is the method I'm using for the triangle
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 40px 300px;
border-color: transparent transparent red transparent;
I have not been able to find a way to make the triangle be 100% width of the parent container.
The end goal will be that the triangle will have a variant height, depending on which product is being looked at, but will always be 100% width of the parent container. This is an example of what my set up is like so far.
Overflow issue with vertically centered popup with vertical-align
I'm trying to create a popup in my application and I need to center it vertically. I do NOT know the height of the popup, so I can't hard-code any values.
I'm experimenting with the following code: Centering in the Unknown
So far the centering works fine, but there is a problem. My popups have a fixed width(and they are not responsive), so my goal is when the width of window is lower than popup's width, a horizontal scroolbar should appear.
On higher resolution the centering works fine:
But when window resolution is lower than popup resolution, this happens: (The actual popup is moved under viewport)
HTML:
<div class="block">
<div class="centered">
<h1>Some text</h1>
<p>But he stole up to us again, and suddenly clapping his hand on my shoulder, said—"Did ye see anything looking like men going towards that ship a while ago?"</p>
</div>
</div>
CSS
.block {
text-align: center;
background: #c0c0c0;
border: #a0a0a0 solid 1px;
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.centered {
display: inline-block;
vertical-align: middle;
width: 500px;
padding: 10px 15px;
border: #a0a0a0 solid 1px;
background: #f5f5f5;
}
CSS: Page content and background image getting cut off on mobile screen
I am new to CSS and am looking for some help with the following.
I have an HTML page with the below structure at the beginning of its body. Inside the body I have a form with the class "bgBanner".
The idea with this is to set a background image only for the form but not for the rest of the body.
When viewing this on the desktop everything looks ok but when viewing it on a mobile / smartphone everything gets cut off at the bottom edge of the screen and I don't get a scrollbar there.
Since I am new to this I guess one of my styles might overwrite another or I am using "overflow" the wrong way. Can someone help me with this ?
My HTML:
<!-- ... -->
<body>
<div class="wrapper">
<?php require_once("includes/menu.php"); ?>
<section id="main">
<form id="frmLogin" class="bgBanner">
<!-- ... -->
My CSS:
html, body {
height: 100%;
overflow: auto;
width: 100%;
}
body {
margin: 0;
padding: 0;
}
form, #main {
height: 100%;
overflow: auto;
}
#main {
border: 1px solid #ccc;
border-radius: 5px;
margin-left: 8.33%; /* col-1 */
margin-right: 8.33%; /* col-1 */
overflow: hidden;
}
.bgBanner {
background-image: url('../images/banner-M.jpg');
background-position: left top;
background-repeat: no-repeat;
background-size: cover;
min-height: 600px;
}
Many thanks for any help with this, Mike
Fix thead on the top of all page
I am trying to table print using by CSS @media print.I search this type of case every where, I found similar type of solution but it can't work.
Currently I am using Google chrome version 43.0 and FireFox 38.0.5, FireFox is repeat the thead in every pages and arranging tr lines automatically, but chorme not working on the same case.
Is it possible to print using by CSS @media print? I hope you understand what I mean and your kindly suggestion.
HTML:
<input type="button" value="Print My Account" onClick="window.print()">
<script language="javascript" type ="text/javascript" >
</script>
<div class="lftAlign">
<table class="table" id="sheet" border="1">
<thead>
<tr>
<th colspan="3">Account Holder Name: Mr. XYZ</th>
<th>From: Jan 01, 2015</th>
<th> To: Jun, 29, 2015</th>
</tr>
<tr>
<th>Date</th>
<th>Description</th>
<th>Increase</th>
<th>Decrease</th>
<th>Balance</th>
</tr>
</thead>
<tbody class="alright">
<tr>
<td>Jan, 01, 2015</td>
<td>Cash Deposit</td>
<td>$ 20,000.00</td>
<td></td>
<td>$ 20,000.00</td>
</tr>
<tr>
<td>Jan, 02, 2015</td>
<td>Cash Withdrawal</td>
<td></td>
<td>$ 5,000.00</td>
<td>$ 15,000.00</td>
</tr>
<tr>
<td>Jan, 03, 2015</td>
<td>Cash Deposit</td>
<td>$ 10,000.00</td>
<td></td>
<td>$ 25,000.00</td>
</tr>
<tr>
<td>Jan, 09, 2015</td>
<td>Cash Deposit</td>
<td>$ 1,000.00</td>
<td></td>
<td>$ 26,000.00</td>
</tr>
<tr>
<td>Feb, 05, 2015</td>
<td>Cash Withdrawal</td>
<td></td>
<td>$ 2,000.00</td>
<td>$ 24,000.00</td>
</tr>
<tr>
<td>Feb, 07, 2015</td>
<td>Cash Withdrawal</td>
<td></td>
<td>$ 5,000.00</td>
<td>$ 19,000.00</td>
</tr>
<tr>
<td>Feb, 11, 2015</td>
<td>Cash Withdrawal</td>
<td></td>
<td>$ 4,000.00</td>
<td>$ 15,000.00</td>
</tr>
<tr>
<td>Feb, 19, 2015</td>
<td>Cash Deposit</td>
<td>$ 11,500.00</td>
<td></td>
<td>$ 26,500.00</td>
</tr>
<tr>
<td>Feb, 23, 2015</td>
<td>Rent Paid</td>
<td></td>
<td>$ 1,000.00</td>
<td>$ 25,500.00</td>
</tr>
<tr>
<td>Feb, 28, 2015</td>
<td>Interest Paid</td>
<td>$ 300.00</td>
<td></td>
<td>$ 25,800.00</td>
</tr>
<tr>
<td>Mar, 01, 2015</td>
<td>Cash Deposit</td>
<td>$ 1,200.00</td>
<td></td>
<td>$ 27,000.00</td>
</tr>
<tr>
<td>Mar, 02, 2015</td>
<td>Cash Deposit</td>
<td>$ 1,000.00</td>
<td></td>
<td>$ 28,000.00</td>
</tr>
<tr>
<td>Mar, 03, 2015</td>
<td>Cash Deposit</td>
<td>$ 1,000.00</td>
<td></td>
<td>$ 29,000.00</td>
</tr>
<tr>
<td>Mar, 04, 2015</td>
<td>Cash Deposit</td>
<td>$ 11,000.00</td>
<td></td>
<td>$ 40,000.00</td>
</tr>
<tr>
<td>Mar, 05, 2015</td>
<td>Cash Deposit</td>
<td>$ 5,000.00</td>
<td></td>
<td>$ 45,000.00</td>
</tr>
<tr>
<td>Mar, 10, 2015</td>
<td>Cash Deposit</td>
<td>$ 10,000.00</td>
<td></td>
<td>$ 55,000.00</td>
</tr>
<tr>
<td>Mar, 15, 2015</td>
<td>Cash Deposit</td>
<td>$ 5,000.00</td>
<td></td>
<td>$ 60,000.00</td>
</tr>
<tr>
<td>Mar, 15, 2015</td>
<td>Rent Paid</td>
<td></td>
<td>$ 1,000.00</td>
<td>$ 59,000.00</td>
</tr>
<tr>
<td>Mar, 16, 2015</td>
<td>Cash Deposit</td>
<td>$ 3,000.00</td>
<td></td>
<td>$ 62,000.00</td>
</tr>
<tr>
<td>Mar, 18, 2015</td>
<td>Cash Deposit</td>
<td>$ 8,000.00</td>
<td></td>
<td>$ 70,000.00</td>
</tr>
<tr>
<td>Mar, 20, 2015</td>
<td>New Placement of Loan</td>
<td>$ 50,000.00</td>
<td></td>
<td>$ 120,000.00</td>
</tr>
<tr>
<td>Mar, 20, 2015</td>
<td>Purchase of Land & Building</td>
<td></td>
<td>$ 100,000.00</td>
<td>$ 20,000.00</td>
</tr>
<tr>
<td>Mar, 20, 2015</td>
<td>Loan fee</td>
<td></td>
<td>$ 2,000.00</td>
<td>$ 18,000.00</td>
</tr>
<tr>
<td>Mar, 28, 2015</td>
<td>Cash Deposit</td>
<td>$ 20,000.00</td>
<td></td>
<td>$ 38,000.00</td>
</tr>
<tr>
<td>Apr, 20, 2015</td>
<td>Instalment</td>
<td></td>
<td>$ 12,000.00</td>
<td>$ 26,000.00</td>
</tr>
<tr>
<td>May, 20, 2015</td>
<td>Instalment</td>
<td></td>
<td>$ 12,000.00</td>
<td>$ 14,000.00</td>
</tr>
<tr>
<td>Jun, 20, 2015</td>
<td>Instalment</td>
<td></td>
<td>$ 12,000.00</td>
<td>$ 2,000.00</td>
</tr>
</tbody>
</table>
</div>
CSS:
@page {
size: A4;
margin: .9cm;
}
@media print {
body.print-paper-a4 {
width: 210mm;
height: 297mm;
}
body {
background: white;
margin: 0;
padding: 0;
}
.print-stage,
.no-print {
display: none;
}
body.print-paper.a4 .print-paper {
width: 210mm;
height: 297mm;
}
.print-paper {
page-break-after: always;
margin: 0;
padding: .8cm;
border:none;
overflow: hidden;
}
}
.print-papers {
display: block;
z-index: 2000;
margin: auto;
}
body.print-paper-a4 .print-paper {
width: 21cm;
height:27cm;
}
.print-paper {
margin: auto;
background: white;
border: 1px dotted black;
box-sizing: border-box;
margin: 1cm auto;
padding: .8cm;
overflow: hidden;
}
body.print-mode .no-print-preview {
display: none;
}
body.print-mode .print-preview {
display: block;
}
And Java Script:
function PrintData() {
var printTable = document.getElementById("sheet");
win=window.open("");
win.document.write(sheet.outerHTML);
win.print();
win.close();
}
bootstrap reduce spacing between rows
Bootstrap 3.3.5
I'm trying to reduce the amount of spacing between rows:
Ive tried adding removing margins & padding on the row but doesnt seem to change anything:
<div class="row" style="margin-top: 0px !important; margin-bottom: 0px !important; border: solid 1px red; padding-top: 0px !important; padding-bottom: 0px !important;">
These are the possible solutions to remove the spacing but doesnt seem to work for me.
Here is the code:
<div class="container-fluid">
<div class="row" style=" border: solid 1px red; overflow: hidden; ">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"></div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-right">
<form class="form-horizontal">
<div class="form-group" style="">
<label
class="col-xs-8 col-sm-8 col-md-8 col-lg-8 control-label"
style="font-size: .8em;">Start Total: </label>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-left" style="margin: 0; padding: 0;">
<input type="text" class="form-control input-sm text-left" id="startCount" readonly="readonly" style="">
</div>
</div>
</form>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-left ">
<form class="form-horizontal">
<div class="form-group">
<label
class="col-xs-8 col-sm-8 col-md-8 col-lg-8 control-label"
style="font-size: .8em;">Inmate Total: </label>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-left" style="margin: 0; padding: 0;">
<input type="text" class="form-control input-sm text-left" id="total" readonly="readonly" style="">
</div>
</div>
</form>
</div>
<div class="clearfix"></div>
</div>
<div class="row" style="">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"></div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-right">
<form class="form-horizontal">
<div class="form-group" style="">
<label
class="col-xs-8 col-sm-8 col-md-8 col-lg-8 control-label"
style="font-size: .8em;">Booked: </label>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-left" style="margin: 0; padding: 0;">
<input type="text" class="form-control input-sm text-left" id="book" readonly="readonly">
</div>
</div>
</form>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-left">
<form class="form-horizontal">
<div class="form-group" style="">
<label
class="col-xs-8 col-sm-8 col-md-8 col-lg-8 control-label"
style="font-size: .8em;">Out House: </label>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-left" style="margin: 0; padding: 0;">
<input type="text" class="form-control input-sm text-left" id="house" readonly="readonly">
</div>
</div>
</form>
</div>
<div class="clearfix"></div>
</div>
</div>
my border isn't fitting my element
I am trying to adjust the height or even adjust the placing of the video so all the sides are even but for some reason the top of my border is longer than any of the other sides. I have tried adjusting the height but that just makes the bottom extend. I am not sure what to do. Any help would be appreciated!
<div class="videos">
<div id="video1">
<iframe width="450" height="315" src="https://www.youtube.com/embed/vr0dXfQQfNU" frameborder="0" allowfullscreen></iframe>
</div>
<div id="video2">
<iframe width="450" height="315" src="https://www.youtube.com/embed/fevkx229XBs" frameborder="0" allowfullscreen></iframe>
<!--h <img src="images/vidborder2.png" class="vidborder2">-->
</div>
</div>
div#video1 {
float: right;
border: 15px solid #373636;
box-shadow: 0px 0px 0px 8px rgba(55, 54, 54, .3);
background-color: #373636;
height: 100%;
text-align: center;
}
div#video2 {
border: 15px solid #373636;
box-shadow: 0px 0px 0px 8px rgba(55, 54, 54, .3);
width: 49.6%;
margin: 0 -2em;
background-color: #373636;
height: 100%;
text-align: center;
}
.videos {
margin-top: 65px;
}
iframe {
margin-top: 35px;
}
Bootstrap - Place image anywhere
I want this page www.spotin.dk to be like the image that I have linked to. I want to place an image, in the side, and some texts above that, and then I want these two items to dissapear on smaller screens. How do I do that?
It's made with Bootstrap
Use CSS to move charts close to each other
I have two charts. One is bigger than the other. The bigger one consist of two labels called a and b. The small one consist of label c and d. Code for both charts are similar as the following.
var chart = c3.generate({
bindto: "#chart",
data: {
columns: [
['a', 30],
['b', 50],
],
type : 'donut'
},
});
var chart = c3.generate({
bindto: "#chart1",
size: {
height: 200,
width: 450
},
data: {
columns: [
['c', 50],
['d', 50],
],
type : 'donut'
},
});
I was wondering if it is possible to move the small chart between the empty space in the big chart. So they end up looking like two layered charts. I did inspect element on the small chart and tried to use css to tweak the transform="translate(225,83)" to different values. However i noticed when the small chart got close to the bigger chart parts of it disappeared.
I am not expert in css or charting libraries and would love inputs on how to achieve this. Here is my FIDDLE
Creating popularity bars in css/html
I'm trying to make a popularity bar like that of Spotify
Anyone know of any good tutorials (havn't been able to find any). Or have any code builds of their own?
Optimize logic of jQuery Code
I have a very illogical jQuery code and I want to see if someone finds a better way to do the exact same thing:
jQuery:
$(".col-md-3 img").hover(function() {
$(this).parent().children(".search").show();
$(this).parent().children(".photo").css("opacity","0.4");
}, function(){
$(this).parent().children(".search").hide();
$(this).parent().children(".photo").css("opacity","1");
});
HTLM corresponding to this code:
<div class="col-md-3">
<img class="photo" src="img/1_small.jpg" alt="img" />
<img class="search hidden-xs" src="img/search.png" width="50px"/>
</div>
I have multiple similar divs.
EDIT:
I don't like the fact that I am accessing the DOM many times with:
$(this).parent().children();
I'm going back and forth and I think it might be a better solution.
The problem with the siblings is that one image is on the other, with position absolute and this causes some errors on the jQuery. The live website you can see here: live
Responsive-Web Design: flow of the page.
I've been going through a tutorial on CSS and on the Responsive Web Design section, the author wrote something I was not able to follow. What is the purpose of this section in the code:
.row:after {
content: "";
clear: both;
display: block;
}
The author says "The columns inside a row are all floating to the left, and are therefore taken out of the flow of the page, and other elements will be placed as if the columns does not exist. To prevent this, we will add a style that clears the flow"
I'm not exactly sure how the above style accomplishes this. Below is the full code.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.row:after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 15px;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color :#33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
</style>
</head>
<body>
<div class="header">
<h1>Chania</h1>
</div>
<div class="row">
<div class="col-3 menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="col-9">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
<p>Resize the browser window to see how the content respond to the resizing. </p>
</div>
</div>
</body>
</html>
I already read the content property in CSS question asked on this website already, but everything still seemed unclear.
Div does not show the css
I don't find my problem:
body {
position: relative;
}
#content {
position: relative;
}
#overlay {
position: absolute;
z-index: 10;
width: 500px;
height: 150px;
top: 215px;
}
#callAction {
position: absolute;
z-index: 1;
display: inline-block;
padding: 38px 110px;
}
<div id="content">
<div id="overlay">
<a id="callAction">Button<a>
</div>
</div>
The CSS of the a-tag works, but not the css of the div-tag with the id #overlay. What is the problem here??
How to create an div background that is not affected by page zoom with CSS
My question is going to be pretty concise. I saw this Deezer page and I tried to zoom in and out to see that the image is "out of zoom" (see the image below)
Below is a structure we consider to be my page:
<body>
<div class="visual-header">
<div class="container">
SOME TEXT
</div>
</div>
PAGE CONTENT
</body>
How am I supposed to use image.png of a size of 2000x800 pixels to get this effect?
Photoviewer Switching between divs
Hi all,
I have created a gallery of pictures which you cannot see with Jfiddle but all the code is there. I am attempting to have it so each time you click on an image one paragraph disappears and another emerges. The way I coded it works with one problem. If i click anywhere on the screen other than another image the paragraph disappears and another will not appear until I click an image. How can I code it so that the paragraphs will hide only if I click on one of the images and not if I click elsewhere as well. Thank you for your help!
Java:
var request;
var $current;
var cache = {};
var $frame = $('#photo-viewer');
var $thumbs = $('.thumb');
function crossfade($img) {
if ($current) {
$current.stop().fadeOut('slow');
}
$img.css({
marginLeft: -$img.width() / 2,
marginTop: -$img.height() / 2
});
$img.stop().fadeTo('slow', 1);
$current = $img;
};
$(document).on('click', '.thumb', function(e){
var $img;
var src = this.href;
request = src;
e.preventDefault();
$thumbs.removeClass('active');
$(this).addClass('active');
if(cache.hasOwnProperty(src)) {
if (cache[src].isLoading === false) {
crossfade(cache[src].$img);
}
} else {
$img = $('<img/>');
cache[src] = {
$img: $img,
isLoading: true
};
$img.on('load', function() {
$img.hide();
$frame.removeClass('is-loading').append($img);
cache[src].isLoading = false;
if(request === src) {
crossfade($img);
}
});
$frame.addClass('is-loading');
$img.attr({
'src': src,
'alt': this.title || ' '
});
}
});
$(document).mouseup(function(e) {
var container = $("#mad");
jQuery("#para").hide();
//toggle the componenet with class msg_body
jQuery("#mad").click(function() {
$(this).next($("#para").fadeIn(500))
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
$("#para").hide();
}
})
});
$(document).mouseup(function(e) {
var container = $("#ralph");
jQuery("#para2").hide();
//toggle the componenet with class msg_body
jQuery("#ralph").click(function() {
$(this).next($("#para2").fadeIn(500))
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
$("#para2").hide();
}
})
});
$(document).mouseup(function(e) {
var container = $("#julia");
jQuery("#para3").hide();
//toggle the componenet with class msg_body
jQuery("#julia").click(function() {
$(this).next($("#para3").fadeIn(500))
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
$("#para3").hide();
}
})
});
$(document).mouseup(function(e) {
var container = $("#sophie");
jQuery("#para4").hide();
//toggle the componenet with class msg_body
jQuery("#sophie").click(function() {
$(this).next($("#para4").fadeIn(500))
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
$("#para4").hide();
}
})
});
$(document).mouseup(function(e) {
var container = $("#may");
jQuery("#para5").hide();
//toggle the componenet with class msg_body
jQuery("#may").click(function() {
$(this).next($("#para5").fadeIn(500))
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
$("#para5").hide();
}
})
});
$(document).mouseup(function(e) {
var container = $("#kiss");
jQuery("#para6").hide();
//toggle the componenet with class msg_body
jQuery("#kiss").click(function() {
$(this).next($("#para6").fadeIn(500))
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
$("#para6").hide();
}
})
});
$('.thumb').eq(0).click();
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="Gallerystyle.css">
<ul class="navigation">
<p> Nicholas Clegg </p>
<li><a href="painthome.html">Home</a></li>
<li><a href=favart.html>Artists</a></li>
<li><a href="#">Sale</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</head>
<body>
<div id="photo-viewer">
<p id="para"> <em> "Maddy" </em> <br>
<span class="normal">This is a picture of Nicholas' <br>
niece. Her innocence and utter <br>
adorableness inspired Nick to <br>
draw this beautiful portrait <br>
of a young lady early in <br>
her life.</span></p>
<p id="para2"> <em> "Raplhie" </em> <br>
<span class="normal">This is a picture of Nicholas' <br>
grandfather. Nick captures the <br>
joy of ageing by encapsulating <br>
every detail of an older man <br>
still in the prime of his life.</span></p>
<p id="para3"> <em> "Julia" </em> <br>
<span class="normal">This is a picture of Nicholas' <br>
grandfather. Nick captures the <br>
joy of ageing by encapsulating <br>
every detail of an older man <br>
still in the prime of his life.</span></p>
<p id="para4"> <em> "Sophie" </em> <br>
<span class="normal">This is a picture of Nicholas' <br>
grandfather. Nick captures the <br>
joy of ageing by encapsulating <br>
every detail of an older man <br>
still in the prime of his life.</span></p>
<p id="para5"> <em> "Unknown" </em> <br>
<span class="normal">This is a picture of Nicholas' <br>
grandfather. Nick captures the <br>
joy of ageing by encapsulating <br>
every detail of an older man <br>
still in the prime of his life.</span></p>
<p id="para6"> <em> "Jo and Rich" </em> <br>
<span class="normal">This is a picture of Nicholas' <br>
grandfather. Nick captures the <br>
joy of ageing by encapsulating <br>
every detail of an older man <br>
still in the prime of his life.</span></p>
</div>
<div id="thumbnails">
<a id ="mad" href="img/madeline.jpg" class ="thumb active" title="Madeline">
<img id ="mad" src="img/madelinethumb.jpg" alt="Madeline" /></a>
<a id="ralph" href="img/ralph.jpg" title="Ralph" class="thumb">
<img id="ralph" src="img/ralphthumb.jpg" alt="Ralph" /></a>
<a id="julia" href="img/julia.jpg" title="Julia" class="thumb">
<img id="julia" src="img/juliathumb.jpg" alt="Julia" /></a>
<a id="sophie" href="img/sophie.jpg" title="Julia" class="thumb">
<img id="sophie" src="img/sophiethumb.jpg" alt="Julia" /></a>
<a id="may" href="img/may.jpg" title="Julia" class="thumb">
<img id="may" src="img/maythumb.jpg" alt="May" /></a>
<a id="kiss" href="img/kiss.jpg" title="Julia" class="thumb">
<img id="kiss" src="img/kissthumb.jpg" alt="Joanna and Rich" /></a>
</div>
<script src='jquery-1.11.2.min.js'> </script>
<script src='photo-viewer2.js'> </script>
</body>
</html>
Vertically Center Text
I am having an issue with some CSS within my code. Using bootstrap I have created a square which is 400px height, and I would like to have text inside there which is centered vertically. I am using JavaScript to change the text when hovered, the issue here is if the text changes to two lines worth, the CSS then no longer works correctly.
<div class="col-xs-offset-1 col-xs-10 col-sm-offset-0 col-sm-4">
<div class="navigation-links">
<h2><a href="#" id="text-display" class="network"
onmouseover="changeText('More network information here')"
onmouseout="defaultText()">Network</a></h2>
</div>
</div>
.navigation-links {
height: 400px;
}
h2 {
font-family: 'Open Sans', sans-serif;
font-size: 40px;
text-align: center;
-webkit-font-smoothing: antialiased;
}
a {
text-decoration: none;
color: white;
}
a:hover {
color: white;
text-decoration: none;
}
Bootstrap: Stretching navbar-toggle button in media query
I have started making a simple website using Bootstrap. Everything works fine, but because I've put my logo in navbar-header , the button does quite funky when going under 407px (407 due to the logo size).
Currently, it is like this (>407px wide): http://ift.tt/1QZXy9C
When under 407, it looks like this: http://ift.tt/1GIvxIH
I want it to look like this: (Click the previous link, replace #1 by #2, "I don't have enough reputation...")
How would I go about doing this?
Thanks! Please let me know if you want any further details. -Jack
jquery tabs function on click
Only problem that i have is when page load, all 4(four) tabs have .current class on it. Want i want is that 1st tab (data-tab="tab-1) have class .current on page load and all other to be hidden. Here is my full project section
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
});
.tabs li.current {
color: red;
}
.tab-content {
display: none;
}
.tab-content.current {
display: block;
}
<script src="http://ift.tt/1oMJErh"></script>
<section class="innovation">
<div class="categories-wrap">
<ul class="tabs">
<li class="tab-link" data-tab="tab-1">
<i class="sprite-call-black"></i>
<h4>Pristine coverage</h4>
<p>Enjoy your calls without interuptions like dropped calls, poor sound quality, and delayed video.</p>
</li>
<li class="tab-link" data-tab="tab-2">
<i class="sprite-call-black"></i>
<h4>Chat messaging</h4>
<p>Chat in real time with connections all around the world. </p>
</li>
<li class="tab-link" data-tab="tab-3">
<i class="sprite-call-black"></i>
<h4>Video calling</h4>
<p>WiFi paired with reliable cellular service is how we’ve got you covered in more places than ever before.</p>
</li>
<li class="tab-link" data-tab="tab-4">
<i class="sprite-call-black"></i>
<h4>Photo share</h4>
<p>WiFi paired with reliable cellular service is how we’ve got you covered in more places than ever before.</p>
</li>
</ul>
</div>
<div class="tabs-wrap">
<div id="tab-1" class="tab-content current">
<img src="" alt="Pristine Coverage">
</div>
<div id="tab-2" class="tab-content">
<img src="" alt="Chat Messaging">
</div>
<div id="tab-3" class="tab-content">
<img src="" alt="Video Calling">
</div>
<div id="tab-4" class="tab-content">
<img src="" alt="Photo Share">
</div>
</div>
</section>
CheckBoxList Placement
I have two CheckBoxLists on my webpage. I have tried to center them on the page. Nothing so far has worked. I wanted to know if it has to do with the table that is created on databind and if I have to somehow add attributes to that instead of formatting the TR and TD? Any help would be appreciated.
I have tried creating three td's, putting the checkboxlist in the middle td and setting the left and right td's margin to 25%. Did not work.
I have tried setting the <td style="text-align:center;">, this did not work either.
3d transform for a parent-child divs
Why for the following HTML:
<div class="container">
<div class="bottom">
<div class="face"></div>
</div>
</div>
And CSS:
.container {
width: 300px;
height: 300px;
position: relative;
transform: perspective(900px);
transform-style: preserve-3d;
animation: rot 8s infinite linear;
}
.bottom {
width: 200px;
height: 200px;
background-color: blue;
position: absolute;
top: 15%;
left: 15%;
opacity: 1;
}
.face {
width: 100px;
height: 200px;
background-color: red;
position: absolute;
left: 0px;
top: 0px;
transform-origin: 0% 0%;
transform: rotateY(60deg);
}
A blue square doesn't cover the red rectangle when it turns back (backface-visibility doesn't help)? At the same time when .bottom and .face are not in a parent-child relationship everything works as expected.
See plunker
Note: works in Chrome. In Firefox the first example doesn't work. In IE both of them.
Navbar color change after defined y position
I have a nice navbar that is fixed to the top of the window. When a user scrolls past a certain div, it will change the background color of the navbar. Up to this point, it has been working great for me.
I recently added a few anchor links to my website. Now when a user clicks on an anchor link and is brought to the page with the navbar on it, the navbar is not the correct color. It is only when the user scrolls a little, that the navbar changes color. But I would like the navbar to have the correct background color as soon as the user lands on the page.
$( document ).ready(function() {
var mainbottom = $('.changenavcolor').offset().top + $('.changenavcolor').height();
// on scroll,
$(window).on('scroll',function(){
// we round here to reduce a little workload
stop = Math.round($(window).scrollTop());
if (stop > mainbottom) {
$('.os .navbar').addClass('navbarblue');
} else {
$('.os .navbar').removeClass('navbarblue');
}
});
});
Bootstrap carousel moves down when in mobile mode when i press the toggle navbar
In mobile view, when the navbar collapses and i press on the toggle, the navbar behaves as it should but the carousel also moves down along with it. Also there is a 70px gap between the navbar and the carousel, which i used to fix by adding a negative margin-top on the carousel so it goes up by force, but how do i do this naturally?
Thank you!
Center images in a div with equal horizontal and vertical spacing
I have a div containing 10 images, each with its own div:
<div id="TankDialog" title="Choose Tank" style="display:none">
<div class="ImageBox"><img src="images/tanks/tank1.png" style="width:150px" /></div>
<div class="ImageBox"><img src="images/tanks/tank2.png" style="width:150px" /></div>
<div class="ImageBox"><img src="images/tanks/tank3.png" style="width:150px" /></div>
<div class="ImageBox"><img src="images/tanks/tank4.png" style="width:150px" /></div>
<div class="ImageBox"><img src="images/tanks/tank5.png" style="width:150px" /></div>
<div class="ImageBox"><img src="images/tanks/tank6.png" style="width:150px" /></div>
<div class="ImageBox"><img src="images/tanks/tank7.png" style="width:150px" /></div>
<div class="ImageBox"><img src="images/tanks/tank8.png" style="width:150px" /></div>
<div class="ImageBox"><img src="images/tanks/tank9.png" style="width:150px" /></div>
<div class="ImageBox"><img src="images/tanks/tank10.png" style="width:150px" /></div>
</div>
These images are not uniform in size but I am forcing them all to 150px. But I want to lay out the images in a grid-like fashion so that they're each inside an invisible box that takes the same amount of horizontal and vertical space. And I want each image centered inside its invisible box. The divs around the images are just to aid with positioning/placement--if they're not necessary to achieve this layout, that's fine. The problem is that each image gets positioned at the top left of its div, rather than in the center. Here is the ImageBox class:
.ImageBox{
float:left;
width:177px;
height:177px;
display:block;
margin: 0 auto;
}
Notice in the screenshot below how the image aligns in the top-left rather than the center. How can I fix this?
mercredi 6 mai 2015
how to take the greatest integer and if are 2 or more take one randomly
my code
int zone1;
int zone2;
int zone3;
public void countVotes()
{
if ((zone1 == 0) && (zone2 == 0) && (zone3 == 0))
{
return;
}
if ((zone1 == zone2) && (zone2 == zone3))
{
newzone = Rnd.get(1, 3);
return;
}
if ((zone2 < zone1) && (zone1 > zone3))
{
newzone = 1;
}
if ((zone1 < zone2) && (zone2 > zone3))
{
newzone = 2;
}
if ((zone1 < zone3) && (zone3 > zone2))
{
newzone = 3;
}
changeZone(newzone);
}
and is not what I exactly want, how to simple take grater integer? i cannot imagine that if i will want add more zones ;/
How to create Bullet Square in Word POI Java [on hold]
I dealt the creation of a document . I used the API POI to create the document in Word format. It can help you to create lists. You have best solutions? Thanks!!
This is my solution:
public class SetBulletSquareWordPOI {
private static String FILE_DOC = "C:/Temp/Test1.doc";
public static void main(String[] args) throws Exception {
XWPFDocument doc = new XWPFDocument();
XWPFParagraph para = doc.createParagraph();
para.setVerticalAlignment(TextAlignment.CENTER);
XWPFRun run = para.createRun();
//Character Square
run.setText(String.valueOf((char) 110));
// Font importatnte for display
run.setFontFamily("Wingdings");
run.setFontSize(6);
run = para.createRun();
run.setText(" Forza Roma");
run.setFontFamily("Verdana");
run.setFontSize(10);
try(FileOutputStream out = new FileOutputStream(FILE_DOC)){
doc.write(out);
}
}
}
Set event_scheduler in mysql
I am trying to set the event to on for the bus table but it does not work. The table as well as the event is being created but the event is not being triggered. I have already set this line event_scheduler = ON; in mysql- my.ini and restart the server.
// Create bus table
stt.execute("CREATE TABLE IF NOT EXISTS bus"
+ "(id INT(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,"
+ "mac VARCHAR(30) NOT NULL UNIQUE,"
+ "route int(11) NOT NULL,"
+ "latitude FLOAT(10,6) NOT NULL,"
+ "longitude FLOAT(10,6) NOT NULL,"
+ "created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP)");
stt.execute("CREATE EVENT IF NOT EXISTS AutoDelete "
+ "ON SCHEDULE AT CURRENT_TIMESTAMP + INTERVAL 3 MINUTE "
+ "DO "
+ "DELETE FROM bus WHERE created_at < (NOW() - INTERVAL 3 MINUTE)");
stt.execute("SET GLOBAL event_scheduler = ON");
Inscription à :
Commentaires (Atom)