hello i have the problem that my layout is suddenly breaks out on desktop screen and i dont get it back that it dosent breaks out.
and my second problem is that i have a small white border between the navigation hover effect and the header.
http://ift.tt/1NnzTKM enter code here my code http://ift.tt/1JriYsm
On Internet Explorer 11, I have an issue with sub-pixel rendering causing an overflow of an element.
As you can see, on IE11, the red part of the gauge seems to be "peeking" out of the bottom, while it seems fine on the other 2 major browsers Chrome and FireFox.
If we zoom in on the issue in IE, we can see what's happening:
It seems to be rendering a sub-pixel over the mask.
The header "Temperature" renders as an element with the height of 34.5px, causing all elements underneath it to be shifted .5px down, causing this issue.
This is how the gauge is built up: JSFiddle
<div id="temperature-gauge" class="gauge-control" data-percentage="0">
<div class="header">Temperature</div>
<div class="gauge-elements">
<div class="gauge">
<div class="inner"></div>
<div class="spinner temp"></div>
</div>
<div class="pointer"></div>
<div class="pointer-knob"></div>
</div>
<div class="indicator">60° C</div>
</div>
Is there any way to solve this, other than giving the header a static height, to ensure all elements underneath are on a full-pixel?
How to do a Semantic UI header row fixed position without breaking table data proportions? position: fixed at css did not work. It breaks table.
There are several ways to style the elements in each page, in Enterprise applications usually the CSS Framework size increased about 1 MB, and when your users are using slow internet connection, you should decrease css framework size.
we can create new CSS for our element like .Blah and value it in css framework and do this for each element which cause increase size of css framework, but a cleaner page
<div id="blah" class="blah"></div>
we can also use our css framework utilities in each view to format each element to keep size of css framework, but a non-clean page
<div id="blah" class="margin10 padding20 bg-color-red fg-color-white text-bold else"></div>
which of above approach is the best approach for an Enterprise application, while you ensure that a majority of your users are using slow internet connection
$(".lookup "+id).css("background-color","green");
I want to to change the background of "lookup 123456" to green when matches are found. I write this to the console: console.log(".lookup "+id) it works fine. But it's not getting selected with the selector.
Any help?
I'm trying to understand the loop and array function in Less (css). But it seems like I can't find any good tutorials on the topic.
More specifically, I'm trying to code a quick padding- & margin class library for Bootstrap 3 using Less. The coder should only change som global variables and the library will rebuild the padding/margin functionality. I want the padding/margin to be responsive. Giving a more spaciesh design on big devices, and not so spaciesh on smaller devices.
I know that the current code is extremly repetitive and will, if I expand it to every device, an extremely long document with code, that isn't gracies nor giving an outside coder a good overview of the function.
So, what can I do to minimize the code into smaller loops and arrays?
//Global variables for space calculation in a mixin
// Variables for padding and margin sections - also refered to as mixin-space-value
@base-top-space: 100px;
@base-right-space: 100px;
@base-bottom-space: @base-top-space;
@base-left-space: @base-right-space;
// Variables for different Types of sizes of space - also refered to in mixin-space as @mixin-space-size
@space-small: 0.75;
@space-medium: 1;
@space-large: 1.75;
@space-xlarge: 2.5;
// Variables for different types of devices - also refered to in mixin-space as @mixin-space-device
@space-xs: 0.5;
@space-sm: 1;
@space-md: 1.25;
@space-lg: 1.5;
//Variables of types of space in mixin
// Padding
@space-type-padding-top: escape('padding:');
@space-type-padding-top: escape('padding-top:');
@space-type-padding-right: escape('padding-right:');
@space-type-padding-bottom: escape('padding-bottom:');
@space-type-padding-left: escape('padding-left:');
// Margin
@space-type-margin: escape('margin:');
@space-type-margin-top: escape('margin-top:');
@space-type-margin-right: escape('margin-right:');
@space-type-margin-bottom: escape('margin-bottom:');
@space-type-margin-left: escape('margin-left:');
// Mixin of padding space
// mixin-space-type: eg. padding-top, margin-right...
//
// Local variables Global variables:
// =============== ================
// Eg.: mixin-space-type = @space-type-padding-top
// Eg.: mixin-space-value = @base-top-space
// Eg.: mixin-space-size = @space-small, @space-medium, @space-large, @space-xlarge
// Eg.: mixin-space-device = @space-xs, @space-sm, @space-md, @space-lg
.mixin-space(@mixin-space-type, @mixin-space-value, @mixin-space-size, @mixin-space-device) {
@mixin-space-type abs(@mixin-space-value * @mixin-space-size * @mixin-space-device);
}
// The following media queries beloow generates different types of padding sizes.
// Top: .pad-top-s, .pad-top-m, .pad-top-l, .pad-top-xl
// Right: .pad-right-s, .pad-right-m, .pad-right-l, .pad-right-xl
// Left: .pad-left-s, .pad-left-m, .pad-left-l, .pad-left-xl
// Bottom: .pad-bottom-s, .pad-bottom-m, .pad-bottom-l, .pad-bottom-xl
// The following media queries beloow generates different types of margin sizes.
// Top: .mar-top-s, .mar-top-m, .mar-top-l, .mar-top-xl
// Right: .mar-right-s, .mar-right-m, .mar-right-l, .mar-right-xl
// Left: .mar-left-s, .mar-left-m, .mar-left-l, .mar-left-xl
// Bottom: .mar-bottom-s, .mar-bottom-m, .mar-bottom-l, .mar-bottom-xl
@media (max-width: @screen-xs-max) {
.lg-md-content-margin {
margin-top: 0px;
}
.pad {
&-top {
&-s {
.mixin-space(@space-type-padding-top, @base-top-space, @space-small, @space-xs);
}
&-m {
.mixin-space(@space-type-padding-top, @base-top-space, @space-medium, @space-xs);
}
&-l {
.mixin-space(@space-type-padding-top, @base-top-space, @space-large, @space-xs);
}
&-xl {
.mixin-space(@space-type-padding-top, @base-top-space, @space-xlarge, @space-xs);
}
}
&-bot {
&-s {
.mixin-space(@space-type-padding-bottom, @base-bottom-space, @space-small, @space-xs);
}
&-m {
.mixin-space(@space-type-padding-bottom, @base-bottom-space, @space-medium, @space-xs);
}
&-l {
.mixin-space(@space-type-padding-bottom, @base-bottom-space, @space-large, @space-xs);
}
&-xl {
.mixin-space(@space-type-padding-bottom, @base-bottom-space, @space-xlarge, @space-xs);
}
}
&-right {
&-s {
.mixin-space(@space-type-padding-right, @base-right-space, @space-small, @space-xs);
}
&-m {
.mixin-space(@space-type-padding-right, @base-right-space, @space-medium, @space-xs);
}
&-l {
.mixin-space(@space-type-padding-right, @base-right-space, @space-large, @space-xs);
}
&-xl {
.mixin-space(@space-type-padding-right, @base-right-space, @space-xlarge, @space-xs);
}
}
&-left {
&-s {
.mixin-space(@space-type-padding-left, @base-left-space, @space-small, @space-xs);
}
&-m {
.mixin-space(@space-type-padding-left, @base-left-space, @space-medium, @space-xs);
}
&-l {
.mixin-space(@space-type-padding-left, @base-left-space, @space-large, @space-xs);
}
&-xl {
.mixin-space(@space-type-padding-left, @base-left-space, @space-xlarge, @space-xs);
}
}
}
.mar {
&-top {
&-s {
.mixin-space(@space-type-margin-top, @base-top-space, @space-small, @space-xs);
}
&-m {
.mixin-space(@space-type-margin-top, @base-top-space, @space-medium, @space-xs);
}
&-l {
.mixin-space(@space-type-margin-top, @base-top-space, @space-large, @space-xs);
}
&-xl {
.mixin-space(@space-type-margin-top, @base-top-space, @space-xlarge, @space-xs);
}
}
&-bot {
&-s {
.mixin-space(@space-type-margin-bottom, @base-bottom-space, @space-small, @space-xs);
}
&-m {
.mixin-space(@space-type-margin-bottom, @base-bottom-space, @space-medium, @space-xs);
}
&-l {
.mixin-space(@space-type-margin-bottom, @base-bottom-space, @space-large, @space-xs);
}
&-xl {
.mixin-space(@space-type-margin-bottom, @base-bottom-space, @space-xlarge, @space-xs);
}
}
&-right {
&-s {
.mixin-space(@space-type-margin-right, @base-right-space, @space-small, @space-xs);
}
&-m {
.mixin-space(@space-type-margin-right, @base-right-space, @space-medium, @space-xs);
}
&-l {
.mixin-space(@space-type-margin-right, @base-right-space, @space-large, @space-xs);
}
&-xl {
.mixin-space(@space-type-margin-right, @base-right-space, @space-xlarge, @space-xs);
}
}
&-left {
&-s {
.mixin-space(@space-type-margin-left, @base-left-space, @space-small, @space-xs);
}
&-m {
.mixin-space(@space-type-margin-left, @base-left-space, @space-medium, @space-xs);
}
&-l {
.mixin-space(@space-type-margin-left, @base-left-space, @space-large, @space-xs);
}
&-xl {
.mixin-space(@space-type-margin-left, @base-left-space, @space-xlarge, @space-xs);
}
}
}
}
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
// redo the whole process and changing some global variables
}
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
// redo the whole process and changing some global variables
}
@media (min-width: @screen-lg-min) {
// redo the whole process and changing some global variables
}
I am currently building a small menu consisting of two images. The image caption on these images was build with this little css stylesheet. CSS CAPTION ANIMATION I am using the images to switch between different containers, filled with text. But since i've integrated the css captions, the jQuery "toggle" statement won't work constantly anymore. It seems like it only works when the animation has stopped. Therefore i can't switch the containers during the css animation. Here is a shortened upload of the construct. (try to switch rapidly between the two divs, by clicking on the images)
Thanks for any help.
Ive been converting a lot of my site to sprites to speed it up. Once i switched a heap of images to a sprite that are in a marquee through css, they aren't floating left anymore but are stacked instead.
Its got be baffled to what the issue is.
Any ideas? http://ift.tt/1LvDDuC
<p class="microsoft marquee"> <span><a href="hd-tropical-island-beach-paradise-wallpapers.htm"><img class="a1"></img></a>
<a href="hd-garfield-and-friends-comic-desktop-wallpapers.htm"><img class="a2"></img></a>
<a href="the-legend-of-zelda-majora%27s-mask-desktop-wallpapers-3ds.htm"><img class="a3"></img></a>
<a href="hd-disney-frozen-wallpapers-for-mobile-phones-1080x1920.htm"><img class="a4"></img></a>
<a href="hd-penguins-of-madagascar-mobile-wallpapers-1080x1920.htm"><img class="a5"></img></a>
<a href="the-augusta-national-golf-course-wallpapers-hd.htm"><img class="a6"></img></a>
<a href="banjo-kazooie-wallpapers-hd-nuts-and-bolts-and-nintendo-64.htm"><img class="a7"></img></a>
<a href="the-legend-of-zelda-twilight-princess-hd-wallpapers-skyward-sword.htm"><img class="a8"></img></a>
<a href="vw-combi-van-hd-wallpapers-volkswagen-hippie-bus.htm"><img class="a9"></img></a>
<a href="monsters-inc-backgrounds-and-monsters-university-wallpapers-hd.htm"><img class="a10"></img></a>
<a href="awesome-minecraft-hd-desktop-wallpapers-1080p-backgrounds-1920x1080.htm"><img class="a11"></img></a>
<a href="despicable-me-2-hd-wallpapers-for-desktop-1920x1080.htm"><img class="a12"></img></a>
<a href="toy-story-1-2-3-wallpapers-hd-1920x1080-backgrounds.htm"><img class="a13"></img></a>
<a href="the-avengers-wallpapers-for-desktop-1920x1080-movie-backgrounds.htm"><img class="a14"></img></a>
<a href="1920x1080-funny-backgrounds-hilarious-wallpapers-for-desktop.htm"><img class="a15"></img></a></span></p>
.a1, .a2, .a3, .a4, .a5, .a6, .a7, .a9, .a10, .a11, .a12, .a13, .a14, .a15
{width:100px; height:58px;
background-image: url('http://ift.tt/1GTKbjo');
background-repeat: no-repeat;
float: left;}
.a1 {background-position: 0px 0px;}
.a2 {background-position: 0px -64px;}
.a3 {background-position: 0px -128px;}
.a4 {background-position: 0px -186px;}
.a5 {background-position: 0px -244px;}
.a6 {background-position: 0px -302px;}
.a7 {background-position: 0px -366px;}
.a8 {background-position: 0px -424px;}
.a9 {background-position: 0px -482px;}
.a10 {background-position: 0px -540px;}
.a11 {background-position: 0px -598px;}
.a12 {background-position: 0px -656px;}
.a13 {background-position: 0px -714px;}
.a14 {background-position: 0px -772px;}
.a15 {background-position: 0px -830px;}
.marquee {
width: 235px;
float:left;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
border: 1px green solid;
}
.marquee span {
display: inline-block;
padding-left: 100%;
text-indent: 0;
animation: marquee 30s linear infinite;
}
.marquee span:hover {
animation-play-state: paused
}
/* Make it move */
@keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
.microsoft {
z-index: 1;
content: '';
position: absolute;
top: 0; left: 0;
width: 2em; height: 2em;
}
I'm trying to write a responsive email template at present so am restricted to using html tables and inline css (without the assistance of javascript or media queries) in order to support as many email clients as possible.
Specifically I'd like to float some elements (either entire tables or internal columns) so that they fill the width available evenly but also drop to the next to the line when the width available isn't large enough to accommodate all text.
This is my first attempt which spaces the elements evenly within the width available: http://ift.tt/1K5V3i8.
table {
width: 100%;
max-width: 600px;
background-color: #eeeeee;
text-align: justify;
}
table:after {
display: inline-block !important;
}
table th {
vertical-align:top;
text-align: center;
font-weight:normal;
}
<table align="center">
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
<th>Four</th>
<th>Five</th>
<th>Six</th>
<th>Seven</th>
<th>Eight</th>
<th>Nine</th>
<th>Ten</th>
</tr>
</table>
This is my second attempt which allows the elements to drop to the next line when necessary but does not evenly distribute the elements within the full width available: http://ift.tt/1QWQYkq.
table {
width: 100%;
max-width: 600px;
background-color: #eeeeee;
text-align: justify;
}
table th {
display: inline-block !important;
vertical-align:top;
text-align: center;
font-weight:normal;
}
<table align="center">
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
<th>Four</th>
<th>Five</th>
<th>Six</th>
<th>Seven</th>
<th>Eight</th>
<th>Nine</th>
<th>Ten</th>
</tr>
</table>
Is it possible to combine both these effects to distribute the elements evenly but also allow them to drop to the next line when the available width is not sufficient?
Note: I realise it's a little unorthodox to use th elements, however it's to combat an Android quirk.
I have been for hours attempting to get several div's to display and align properly. I have looked all over the internet and I just cannot get it right.
What I want is inside a section determined by a theme of a wordpress page, is the title of the space in the top left of that section, an info box to the left of the title, and below both of those a section containing a table.
At this point, I Just need to make a typical web page where I can build the thing i am building and I can worry about adding it into wordpress later.
|-----------------------------------------|-------------------------------------------| |.......................Title......................|...........................Info.....................| |-----------------------------------------|-------------------------------------------| |..........................................................................................................| |.................................................Table.................................................| |..........................................................................................................| |-------------------------------------------------------------------------------------|
Why that is so hard is beyond me.
The other problem is that I wish for this to be browser independent. I would like to figure out a way for it to be displayed in just such a manner on a desktop computer or a tablet or phone screen. (This may not be possible without a little effort but I thought I'd throw it out there.)
The html generated by php:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Knights Tour</title>
<link rel="stylesheet" type="text/css" href="http://bmfmain/kt/game.css">
<script src="http://bmfmain/kt/jquery.min.js"></script>
</head>
<body>
<div id="header">
<div id="title">
<h1>Knight's Tour</h1>
</div>
<div id="info">
<p>adsf</p>
</div>
</div>
<div id="section">
<table id="game">
<tr>
<td class="tdcls" name="0"></td>
<td class="tdcls" name="1"></td>
<td class="tdcls" name="2"></td>
<td class="tdcls" name="3"></td>
<td class="tdcls" name="4"></td>
<td class="tdcls" name="5"></td>
<td class="tdcls" name="6"></td>
<td class="tdcls" name="7"></td>
</tr>
<tr>
<td class="tdcls" name="8"></td>
<td class="tdcls" name="9"></td>
<td class="tdcls" name="10"></td>
<td class="tdcls" name="11"></td>
<td class="tdcls" name="12"></td>
<td class="tdcls" name="13"></td>
<td class="tdcls" name="14"></td>
<td class="tdcls" name="15"></td>
</tr>
<tr>
<td class="tdcls" name="16"></td>
<td class="tdcls" name="17"></td>
<td class="tdcls" name="18"></td>
<td class="tdcls" name="19"></td>
<td class="tdcls" name="20"></td>
<td class="tdcls" name="21"></td>
<td class="tdcls" name="22"></td>
<td class="tdcls" name="23"></td>
</tr>
<tr>
<td class="tdcls" name="24"></td>
<td class="tdcls" name="25"></td>
<td class="tdcls" name="26"></td>
<td class="tdcls" name="27"></td>
<td class="tdcls" name="28"></td>
<td class="tdcls" name="29"></td>
<td class="tdcls" name="30"></td>
<td class="tdcls" name="31"></td>
</tr>
<tr>
<td class="tdcls" name="32"></td>
<td class="tdcls" name="33"></td>
<td class="tdcls" name="34"></td>
<td class="tdcls" name="35"></td>
<td class="tdcls" name="36"></td>
<td class="tdcls" name="37"></td>
<td class="tdcls" name="38"></td>
<td class="tdcls" name="39"></td>
</tr>
<tr>
<td class="tdcls" name="40"></td>
<td class="tdcls" name="41"></td>
<td class="tdcls" name="42"></td>
<td class="tdcls" name="43"></td>
<td class="tdcls" name="44"></td>
<td class="tdcls" name="45"></td>
<td class="tdcls" name="46"></td>
<td class="tdcls" name="47"></td>
</tr>
<tr>
<td class="tdcls" name="48"></td>
<td class="tdcls" name="49"></td>
<td class="tdcls" name="50"></td>
<td class="tdcls" name="51"></td>
<td class="tdcls" name="52"></td>
<td class="tdcls" name="53"></td>
<td class="tdcls" name="54"></td>
<td class="tdcls" name="55"></td>
</tr>
<tr>
<td class="tdcls" name="56"></td>
<td class="tdcls" name="57"></td>
<td class="tdcls" name="58"></td>
<td class="tdcls" name="59"></td>
<td class="tdcls" name="60"></td>
<td class="tdcls" name="61"></td>
<td class="tdcls" name="62"></td>
<td class="tdcls" name="63"></td>
</tr>
</table>
</div>
<script src="http://bmfmain/kt/game.js"></script>
</body>
</html>
Formatting slightly off due to copy/paste.
The css that is currently being used: (Will change as I work the problem.)
html, body
{
margin: 0;
padding: 0;
}
#header
{
width: 800px;
margin: 0 auto;
float: top;
padding: 5px;
}
#title
{
width: 400px;
text-align: center;
float: left;
position: absolute;
}
#info
{
width: 400px;
text-align: center;
float: right;
position: absolute;
}
#section
{
width: 800px;
height: 800px;
margin: 0 auto;
float: bottom;
}
table
{
width: 100%;
height: 100%;
}
table, th, td
{
border: 1px solid #0000cc;
border-spacing: 0.0rem;
}
th, td
{
width: 8%;
height: 8%;
text-align: center;
background-color: transparent;
}
Again, formatting is off due to not being able to copy/paste code straight into stackexchange.com.
The question is: How do I make the div's appear like the picture above? How do I make the div's appear like the picture above on any platform, computer, tablet, or phone?
Thank you.
I have created a sub-theme of Responsive Bartik and I need to reduce the width of sidebars without touching the original theme:
Original:
@media all and (min-width: 851px) {
.
.
.
#sidebar-first {
width: 25%;
margin-left: -100%; /* LTR */
}
#sidebar-second {
width: 25%;
margin-left: -25%; /* LTR */
clear: none;
}
.
.
.
}
CSS in sub-theme:
/* Raj: To reduce the width of the sidebar: */
@media all and (min-width: 851px)
{
#sidebar-first {
width: 18% !important;
margin-left: -92% !important; /* LTR */
}
#sidebar-second {
width: 18%;
margin-left: -32%; /* LTR */
clear: none;
}
}
To my surprise the original CSS is taking effect. Except for the media queries any other css properties I am able to override. If I change 25% to 18% and -100% to -92% in the original css file itself I am getting the desired result, but I am not able to figure out how to override these values in another css file.
I tried to google but all I am getting is regarding the priorities in media queries but nothing regarding overriding.
I'm going nuts a bit trying to do a website but I'm absolutely incapable of center my <nav> tag. I've read tons of threads with suggestions that involve putting in the CSS margin: 0 auto; or things like text-align: center but nothing seems to work.
I have my CSS in a separate file and so, since my CSS doesn't work at all, I'll only put the HTML here:
<nav>
<ul class="nav nav-pills">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="jobs.html">Jobs</a></li>
<li><a href="contactus.html">Contact us</a></li>
</ul>
</nav>
I'm using Bootstrap as you can see, and I just want to center it.
I'm a HTML/CSS beginner and currently I'm building a simple website. What I wanna do is I'd like to make 3 divs. One for the whole site, one for the content and one for the navigation list - row.
It should look like this:
_ _ _ _ _ _ (navigation list - row)
asdfwefwefwe
cofwerferwefw (content)
To recognize the divs I background-colored them. Whenever I use display-inline it looks like this. whole site div(red colored), main content(orange colored)
When I use display: inline-block whole site div(red colored), main content(orange colored), navigation list - row(blue colored)
Now it works but I want a navigation - row bar and not a ranked list but I don't know how to do it.
Here is my css for the navigation list - row:
.navigationlist{
height:20%;
width:100%;
display:inline-block;
background-color:blue;
}
Thank you very much for reading and for hopefully good answers.
I am trying to create tabs in jquery and have been successful. However, there is one issue I am unable to solve and that is duplicate tabs.
With a single tab, jquery works fine but when I copy and paste that tab it does not work properly. I did add some extra code to find the tab in which the use is currently in by using the closest function but still no result.
Have a look at the code.
//HTML
<div class="tabsContainer">
<ul class="tabs-nav">
<li>
<a href="#tab1" class="active">Tab One</a>
</li>
<li>
<a href="#tab2">Tab Two</a>
</li>
<li>
<a href="#tab3">Tab Three</a>
</li>
</ul>
<section class="tabs-content">
<div class="tabs active" id="tab1">
This is tab 1<br />
This is tab 1<br />
This is tab 1<br />
</div>
<div class="tabs" id="tab2">
This is tab 2<br />
This is tab 2<br />
This is tab 2<br />
</div>
<div class="tabs" id="tab3">
This is tab 3<br />
This is tab 3<br />
This is tab 3<br />
</div>
</section>
</div>
//2nd tab
<div class="tabsContainer">
<ul class="tabs-nav">
<li>
<a href="#tab1" class="active">Tab One</a>
</li>
<li>
<a href="#tab2">Tab Two</a>
</li>
<li>
<a href="#tab3">Tab Three</a>
</li>
</ul>
<section class="tabs-content">
<div class="tabs active" id="tab1">
This is tab 1<br />
This is tab 1<br />
This is tab 1<br />
</div>
<div class="tabs" id="tab2">
This is tab 2<br />
This is tab 2<br />
This is tab 2<br />
</div>
<div class="tabs" id="tab3">
This is tab 3<br />
This is tab 3<br />
This is tab 3<br />
</div>
</section>
</div>
CSS Code
.tabsContainer{
overflow:hidden;
}
.tabs-nav{
overflow:hidden;
margin:0;
padding:0;
list-style:none;
}
.tabs-nav li {
display: inline-block;
background: #34495E;
border-width: 1px 1px 0 1px;
border-style: solid;
border-color: #34495E;
margin-right: 5px;
}
.tabs-nav li a {
display: block;
padding: 10px 15px;
font-weight: bold;
color: #fff;
}
.tabs-nav li a.active {
background: #FFF;
}
.tabs-nav li a.active {
color: inherit;
}
.tabs-content {
border: 1px solid #34495E;
padding: 10px;
background: #FFF;
margin-top: -1px;
overflow:hidden;
}
.tabs-content .tabs{
overflow:hidden;
display:none;
margin:0 0 30px;
}
.tabs-content .tabs.active{
display:block;
}
JAVAScript
$(function() {
//listeing for click events
$('.tabsContainer .tabs-nav li a').on('click', function(){
//if more than 1 tab find out which tab you are currently in using the closest function
//by clicking on the a tag it will find which container it is a part of.
var $tab = $(this).closest('.tabsContainer');
$tab.find('.tabs-nav li a.active').removeClass('active');
$(this).addClass('active');
//grabbing the tab which is clicked using the attribute "href"
var currentClick = $(this).attr('href');
//hiding the current panel
//using a call back function. What this does is wait for the slideup to finish and then it will excute the call back function
$tab.find('.tabs-content .tabs.active').slideUp(300, nextTab);
//the call back function to show the new tab
function nextTab(){
$(this).removeClass('active');
$(currentClick).slideDown(300, function(){
$(this).addClass('active');
});
}
});
});
i'm beginner in java web.. so i can't import file css into project java web, please help me fix it, thanks so much this is my code
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://ift.tt/kTyqzh">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Demo Form Angular</title>
<script src="lib/angular.min.js"></script>
<link type="text/css" rel="stylesheet" href="<c:url value="/css/formAngular.css"" />
</head>
<body>
<div>
<p class="contain">Hello Angular</p>
</div>
</body>
</html>
`
This is quite a complicated question so I am not looking for "full examples", but instead ideas of implementing a solution to my problem.
I am creating a drag-and-drop page where users can drag and drop tools into their workspace. This is currently working fine through the implementation of draggable() (jQuery UI).
However, the system is getting complicated with new features I am implementing:
When dragged onto the workspace, the user can freely move the items around their page. However I would like the user to be able to drag items on top of other divs- and this dropped item should "morph" into this div (hopefully by using append()). This specific div that the element is dropped onto implements sortable(), so where ever the dropped element is placed should be its specific position on this sortable list.
div contains a number of dropped elements; lets say 5 items, if another item is dropped in between the 2nd and 3rd items, it should be appended to this div in that position.Secondly, any element that is appended to a sortable div should then have the ability of being dragged out of this sortable div (un-appended) and back onto the main area of the workspace (I have no clue of how to do this!) BUT it should still holds its ability of being sorted (list should still be sortable).
I am using jQuery + jQuery UI to complete this project and may use other javascript-based extensions if they can complete my desired outcome easily.
Type of implementation I have at the moment
This implementation is very unfinished.
$("div.layout.lo-content > div.content").droppable(
{
drop: function(e, ui)
{
$(ui.draggable).appendTo($(this));
if($(this).hasClass("ui-sortable"))
{
$("div.content").sortable('refresh');
}
}
});
^^ when doing sortable('refresh') it breaks the system with error:
Uncaught Error: cannot call methods on sortable prior to initialization; attempted to call method 'refresh'
The sortable list which the item is dragged onto:
$("div.layout.lo-content > div.content").sortable(
{
opacity:0.7,
axis:'y',
start: function(e, ui)
{
$(this).children("div.ui-sortable-placeholder").css("height",$(ui.helper).css("height"));
}
});
I have a responsive grid layout that works fine, except that the line wrapping of the DIVs gets screwed up depending on the horizontal viewport size. The root cause is the variable height of the DIVs.
<style>
div {
box-sizing: border-box;
}
/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child {
margin-left: 0;
}
/* GROUPING */
.group:before, .group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}
.group {
zoom:1;
/* For IE 6/7 */
background-color: #F5F0E4;
}
/* GO FULL WIDTH AT LESS THAN 720 PIXELS */
.col {
margin: 1% 0 1% 0%;
border: 1px solid red;
}
.span_3_of_3, .span_2_of_3, .span_1_of_3 {
width: 100%;
}
/* GRID OF TWO */
@media only screen and (min-width: 720px) {
.span_2_of_3 {
width: 100%;
}
.span_1_of_3 {
width: 50%;
}
}
/* GRID OF THREE */
@media only screen and (min-width: 1024px) {
.span_3_of_3 {
width: 100%;
}
.span_2_of_3 {
width: 66.6%;
}
.span_1_of_3 {
width: 33.3%;
}
}
.content {
padding: 0px 15px;
margin-bottom: 15px;
}
</style>
<div class="section group">
<div class="col span_1_of_3 content">
<h2>Scuba Diving</h2>
<p>Learn scuba diving, get certified and enjoy the numerous wonders that lay below the surface of the warm and clear Caribbean waters. The coral around Las Galeras is still very much alive, so you can see coral gardens, coral labyrinth, caves, walls, and even a shipwreck. Among the rich marine life are turtles, rays, giant barracudas, colored tropical fish and a lot of other local fauna.
<br/>Diving in Las Galeras is a lot of fun!
<br/>Recommendable operators in Las Galeras include <a href="http://ift.tt/1GTH62T">Las Galeras Divers</a> and <a href="http://ift.tt/1HnZz9d">Playita Sub</a>.</p>
</div>
<div class="col span_1_of_3 content">
<h2>Horseback riding</h2>
<p>Discover beautiful beaches, lush tropical vegetation, amazing views and local lifestyle on horseback. It's an eco-friendly and relaxing way to see things off the beaten track.
<br/>Popular trips to the beach include famous Playa Rincón and the hidden gem of Playa Madama. Trips into the hills include the watch tower of Punto and a visit to one of the nearby mountain villages.
<br/>Several local outfitters have been around for a long time and have horses for every rider level. Check out <a href="http://ift.tt/1GTH7nB">Rudy's Rancho</a> and <a href="http://ift.tt/1HnZz9f">La Hacienda Hostal Ranch</a>.</p>
</div>
<div class="col span_1_of_3 content">
<h2>Whale Watching</h2>
<p>From mid January to the end of March the humpback whales gather in the Samana Bay to give birth and mate. The opportunity to see the whales perform their breathtaking maneuvers as the males compete for the females should not be missed. Numerous respectable tour operators in Las Galeras and Samaná offer excursions, including Dario Pérez, <a href="http://ift.tt/1GTH62X">Joël y Ludi Excursions</a>, <a href="http://ift.tt/1HnZz9h">Whale Samana</a> and <a href="http://ift.tt/1GTH62Z">Samana Tours</a>.</p>
</div>
<div class="col span_1_of_3 content">
<h2>Zip Line Adventure</h2>
<p>About an hour from Las Galeras you find the best adrenalin-rush activity in the Dominican Republic. <a href="http://ift.tt/1HnZBhw">Samaná Zip Line</a> offers a spectacular zip line experience through dense tropical forest at speeds of up to 40mph. The less daring in your group can hike up to the Lulu Waterfall to watch the more adventurous zip by.</p>
</div>
<div class="col span_1_of_3 content">
<h2>Los Haitises National Park</h2>
<p>One of the largest and most biodiverse national parks in the Caribbean is right outside of our doorstep. The impressive mangrove forests, a rich variety of birds and ancient caves are all on the menu when you book an excursion with one of the numerous tour operators in Las Galeras or Samaná.</p>
</div>
<div class="col span_1_of_3 content">
<h2>El Limón Waterfall</h2>
<p>Immersed in a lush tropical forest about an hour away lies Salto El Limón. An experience that will bring you over the edge of a breathtaking 55 meter waterfall. To add to the adventure, get there on horseback and take a dive in the refreshing crystalline waters of the natural pool.</p>
</div>
</div>
The following fiddle contains the above code: http://ift.tt/1GTH631
You'll see that if you make the viewport wide enough to fit 3 columns, the second row of DIVs is messed up -- the DIV for "Zip Line Adventures" is positioned in the third column instead of the first one.
Basically what I'm looking for is a CSS-only solution where the DIVs can be variable height, but that all DIVs within the same row adjust their height according to the tallest one in that row. The result should be a grid of 1x6 (narrowest), 2x3 (medium) or 3x2 (widest).
Note that the basis for the responsive multi-column solution comes from The Responsive Grid System
I'm trying to get a grip on some basics of responsive design, but this issue seems to be beyond my current abilities, so any help is greatly appreciated.
I found that div scroll event can fired continuously in some android device,but render will lag until scroll end?
I tested: Samsung Galaxy Nexus
var outerContent = document.getElementById('outer-content');
var demo = document.getElementById('demo');
var tempStr = '';
var index = 0;
for(var i = 0;i < 800;i++){
tempStr +='<div class="s-item">\
<div class="item-bg" style="width:100%;">'+(index++) + '</div>\
</div>';
}
outerContent.innerHtml = tempStr;
outerContent.onscroll = function(e){
document.title = e.target.scrollTop; //this will update continously during scroll
// element change its color only when scroll stop
demo.style.background = 'yellow';
};
.outer-content{
width:100%;
height:500px;
overflow:auto;
}
.item-bg{
height:38px;
background:green;
}
#demo{
width:40px;
height:40px;
background:red;
position:absolute;
right:0;
top:0;
z-index:99;
}
<div id="demo"></div>
<div id="outer-content" class="outer-content"></div>
Is there some solution for such situation?
I have multiply divs in my html where i want to overlay a window. It is no problem to set the overlay to the correct position of my div with position: aboslute and top and left but when i resize the window or scroll the overlay is not moving with the element. How can i do that simple?
function showDetails(e, elem) {
var parentPosition = getPosition(e.currentTarget);
var overlay = document.getElementById("overlay");
overlay.style.top = parentPosition.y;
overlay.style.left = parentPosition.x;
}
html:
<body>
<div class="content">
<div class="button" onclick="showDetails(event,this)"></div>
<div class="button" onclick="showDetails(event,this)"></div>
<div class="button" onclick="showDetails(event,this)"></div>
</div>
<div id="overlay"></div>
</body>
I am trying to make the width of tds different in the HTML tale but I am unable to do so.
HTML Code
<table class="TFtable" border="1">
<tr>
<th >Heading1</th>
<th >Heading2</th>
<th >Heading3</th>
</tr>
<tr>
<td>Text jshdf hjkhsdk jhfkhds fkjhf sdjkh dsfkjh</td>
<td >Text</td>
<td >Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
</table>
CSS
.TFtable {
width: 50%;
border-collapse: collapse;
table-layout: fixed;
}
.TFtable tr {
padding: 7px;
border: #4e95f4 1px solid;
}
/* provide some minimal visual accomodation for IE8 and below */
.TFtable tr {
background: #FFFFFF;
}
/* Define the background color for all the ODD background rows */
.TFtable tr:nth-child(odd) {
background: #FFFFFF;
}
/* Define the background color for all the EVEN background rows */
.TFtable tr:nth-child(even) {
background: #BCCECE;
}
.TFtable td{
table-layout: fixed;
width: 20px;
height:auto;
overflow: auto;
}
Link to JSFiddle.