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.
Okay, so at this moment I am busy learning responsive CSS. It might be simple for you, but I don't understand how to archieve this:
I am playing with making a 'grid'. I have set all the classes to percentages in width and height, so that should not be the problem. However, when I resize the viewport (window), it's not dynamically growing or shrinking.
See: here
Currently using the following html:
<meta name="viewport" content="width=device-width" />
<div id="wrapper">
<div id="header">
<a href="" title="FavoriteFM" class="top-logo-container"></a>
</div>
<div id="presenter">
<a href="" title="FavoriteFM" class="presenter-one"></a>
<a href="" title="FavoriteFM" class="presenter-two"></a>
<a href="" title="FavoriteFM" class="presenter-three"></a>
<a href="" title="FavoriteFM" class="presenter-four"></a>
<a href="" title="FavoriteFM" class="presenter-five"></a>
</div>
<div id="main">
</div>
Using the following CSS:
<style>
/* Theme */
html {
margin-top: 0px !important;
}
/* DO NOT EDIT OR MONKEYS WILL BITE YOU */
.frame_holder {
position: absolute;
top: 8px;
bottom: 50px;
/* left: 50px; */
right: 150px;
background: #ffffff;
}
.my_frame {
width: 149%;
height: 108%;
/* border: 1px solid #e0e0e0; */
}
body {
background-color: #f0ede9;
margin-top: 0px;
position: relative;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.clearfix {
clear: both;
}
p {
font-family: Roboto;
padding: 1px;
}
#body.layout-1 {
background: #f0ede9 url(../images/border.gif) 640px top repeat-y scroll;
background-color: #f0ede9;
background-image: url(../images/border.gif), url(../images/border-2.gif);
background-repeat: repeat-y, repeat-y;
background-position: 640px top, 0px top;
}
a:hover, a:visited, a:link, a:active {
text-decoration: none;
color: #bababa;
font-family: Roboto;
}
#wrapper {
width: 965px;
margin: 0 auto;
overflow: hidden;
}
#header {
width: 100%;
height: 80px;
background: #2a2727;
margin-top: 20px;
color: #fff;
}
.top-logo-container {
display: block;
height: 100px;
width: 100px;
text-indent: -9999px;
background: url(http://ift.tt/1NnJBMv) 5% 50% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 100px;
}
#main {
margin-left: 2px;
overflow: hidden;
}
#presenter {
margin-top: 40px;
width: 100%;
height: 40%;
overflow: hidden;
}
.presenter-one {
display: block;
height: 100%;
width: 50%;
text-indent: -9999px;
background: url(http://ift.tt/1BLvcsO) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 100% 100%;
}
.presenter-two {
float: left;
position: relative;
display: block;
height: 50%;
width: 25%;
text-indent: -9999px;
background: url(http://ift.tt/1BLvcsO) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 266px 300px;
}
.presenter-three {
position: relative;
display: block;
height: 50%;
width: 25%;
text-indent: -9999px;
background: url(http://ift.tt/1BLvcsO) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 266px 310px;
}
.presenter-four {
position: relative;
display: block;
height: 52%;
width: 25%;
text-indent: -9999px;
background: url(http://ift.tt/1BLvcsO) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 266px 300px;
}
.presenter-five {
position: relative;
display: block;
height: 52%;
width: 25%;
text-indent: -9999px;
background: url(http://ift.tt/1BLvcsO) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 266px 300px;
}
@media screen and (max-width: 965px) {
body {
width: 50%;
}
#main {
width: 50%
}
@media screen and (max-width: 365px) {
body {
width: 100%;
}
#wrapper {
width: 100%
margin: 0 auto;
}
#header {
width: 100%;
background: #2a2727;
color: #fff;
margin-top: 0px;
height: 100px;
}
.top-logo-container {
display: block;
height: 120px;
width: 120px;
text-indent: -9999px;
background: url(http://ift.tt/1NnJBMv) 5% 50% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 120px;
}
#main {
margin-left: 2px;
}
#presenter {
margin-top: 40px;
width: 100%;
height: 100%;
}
.presenter-one {
display: block;
height: 100%;
width: 100%;
text-indent: -9999px;
background: url(http://ift.tt/1BLvcsO) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 100% 100%;
}
.presenter-two {
display: block;
height: 50%;
width: 50%;
text-indent: -9999px;
background: url(http://ift.tt/1BLvcsO) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 100% 100%;
}
.presenter-three {
position: relative;
display: block;
height: 50%;
width: 50%;
text-indent: -9999px;
background: url(http://ift.tt/1BLvcsO) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 100% 100%;
}
.presenter-four {
position: relative;
display: block;
height: 50%;
width: 50%;
text-indent: -9999px;
background: url(http://ift.tt/1BLvcsO) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 100% 100%;
}
.presenter-five {
position: relative;
display: block;
height: 50%!important;
width: 50%;
text-indent: -9999px;
background: url(http://ift.tt/1BLvcsO) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 100% 100%
}
}
Using bootstrap v3.0.2.
<table class="table data-table table-bordered no-bottom-margin usage-detail-table">
<thead>
<tr>
<th></th>
<th>Used</th>
<th>Deleted</th>
<th>Total</th>
<tr>
</thead>
<tbody>
<tr>
<th>{{'update-profile.detail-usage.personal.files' | translate}}</th>
<td>{{usageDetails.personalDiskUsage | commaSeparatedNumber}} bytes</td>
<td>{{usageDetails.personalDeletedDiskUsage | commaSeparatedNumber}} bytes</td>
<td><b>{{usageDetails.totalPersonalUsage | commaSeparatedNumber}} bytes</b></td>
</tr>
<tr>
<th>{{'update-profile.detail-usage.shared.files' | translate}}</th>
<td>{{usageDetails.sharedDiskUsage | commaSeparatedNumber}} bytes</td>
<td>{{usageDetails.sharedDeletedDiskUsage | commaSeparatedNumber}} bytes</td>
<td><b>{{usageDetails.totalDeleted | commaSeparatedNumber}} bytes</b></td>
</tr>
<tr>
<th>Total</th>
<td><b>{{usageDetails.totalUsed | commaSeparatedNumber}} bytes</b></td>
<td><b>{{usageDetails.totalDeleted | commaSeparatedNumber}} bytes</b></td>
<td><b>{{spaceUsed | commaSeparatedNumber}} bytes<br>({{spaceUsed | sizeText}})</br></b></td>
</tr>
</tbody>
</table>
Table want to give the first column element the same look as the table header. But <th> tag is not working. How to add row headers here?
These are the additional css class:
.usage-detail-table > tbody > tr > td {
text-align: right;
padding-right: 20px;
}
.usage-detail-table > thead > tr > th {
text-align: right;
padding-right: 20px;
}
I have added some css media queries but it doesn't seem to do make any change i mean i have added this code
@media screen and (min-width:10px) and (max-width:640px) {
.leftSideBar{display:none !important;}
.rightSideBar{display:none !important;}
}
but the left and right sidebars are still visible i have also tried changing the range of min-width and max-width it still doesn't make any difference am i missing something here ? do i have to add something more than this in my css to make it work ?
I use animate.css to fadeInDown and fadeInUp the element.
<h1 class="animated fadeInDown">text</h1>
<h5 class="animated fadeInUp">text</h5>
How to make this animations work after pageload?
Also I added
.preload * {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
}
$(".loader").fadeOut("slow", function(){
$("#home").removeClass("preload");
});
But this do not help.
I have website i.e. onlinecliniq.com There is scroll at x-axis. I have checked complete HTML and found that container below menu i.e usman_content_topb is going outside of and causing the scroll. Can you please help me remove it.
I think problem is due to width:1060px; in internal div i.e. usman_main.
I'm trying to replace a gmap that I have on my index page with an embedded image version for mobile. The map looks okay on desktop but when I view it on mobile it is too long and scrolling to the end of the page is challenging due to the gmap. I've set "scrollwheel: false" on the JS which fixed this for desktop but on mobile still does not work. I've also placed the map width to 90% but the map still looks to large on mobile. So I've decided to replace the map with an embedded image version of it once the screen size goes under 767px. The only thing is that I'm not sure how to go about swapping the two (gmap to image). Any advise would be greatly appreciated.
Some details about the page, it is being displayed using the RoR's "render".
index.html:
<div id="map" class="google-maps">
<%= render "gmap" %>
</div>
_gmap.html:
<script type="text/javascript">
handler = Gmaps.build('Google');
handler.buildMap({
provider: {
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.HYBRID,
maxZoom: 64
},
internal: {
id: 'map'
}
}, function() {
markers = handler.addMarkers(<%=raw@hash.to_json%>);
handler.bounds.extendWith(markers);
handler.fitMapToBounds()
});
handler
</script>
gmap.css
.google-maps {
width: 90%;
height: 100%;
margin: 0 auto;
position: absolute;
top:0;
z-index:1;
}
I want to create a class, for example, .myTable, that includes several existing Bootstrap classes, like table table-striped table-hover, so that i can apply this single new class to all my tables. How do I accomplish that please?
ashilon
I have two tables. When I adding data to the first table, the alignments are crashing. Does anyone have an idea to keep alignment between this two ?!This is an image of my tables.
I have a dropdown inside a black container of 600px and i would like to have the red childrens show in a width of 100% of container instead of 100% of page width as it happens now. I need this to be in % because the website is responsive.
Please take a look at Jsfiddle Demo
<div id="navcontainer">
<ul>
<li>
<a href="#">Eggs</a>
<ul>
<li><a href="">sub menu</a></li>
<li><a href="">sub menu</a></li>
<li><a href="">sub menu</a></li>
<li><a href="">sub menu</a></li>
</ul>
</li>
</ul>
</div>
i am using codetabs.js for my project and now i hava a problem with that i hava an tab box with 4 tabs and wanna To organize those in side by side layout , i mean content of next tab shows at side of active tab . i used this jquery code :
<script>
jQuery(document).ready(function($) {
$(".ct-ready.ct-cur").next().css({"visibility": "visible", "margin-left": "45%"});
});
</script>
and it worked but just for firs tab and when active tab changed attributes those i added doesn't remove and next tab (number 3 tab) hasn't any attributes .
how i can solve this problem to Dynamically change of attributes after class change ? or how to use another way to side by side tabs ?
thanks for your answers.
I should also mention that the call back event of tab change is :
code.ev.on('selectID', function() {
and id used it too , this one problem is just the attributes doesn't remove after class change i think solve this on is easier
I recently discovered this "boilerplate" and instantly fell in love with it, basically because it is simplistic, pretty lightweight and unlike other css frameworks, does not impact your design.
Looking at it's source code, though, it raises some questions, like for example this part here
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
height: 38px;
padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
background-color: #fff;
border: 1px solid #D1D1D1;
border-radius: 4px;
box-shadow: none;
box-sizing: border-box; }
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; }
textarea {
min-height: 65px;
padding-top: 6px;
padding-bottom: 6px; }
Like it isn't bad enough they use universal selectors with attributes, but they do it twice?
A few lines below I see this part
input,
textarea,
select,
fieldset {
margin-bottom: 1.5rem; }
Which could be inserted into the previous rule set I mentioned and avoid the double (or triple) universal selectors.
Here's another one
.container:after,
.row:after,
.u-cf {
content: "";
display: table;
clear: both; }
The clearfix utility class is missing :after.
Looking at their github page, the last update was about 7 months ago, so I suppose they will not be releasing any fixes.
I'm no CSS guru though, so I would like to ask if my suspicions are correct and ultimately, can you give me some names for other CSS frameworks that work the same way but aren't as poorly written?
I have a relatively simple Fiddle, that I've mucked up with additional @-webkit- and @-moz- duplicates, but it still fails on Firefox.
div.overlay-dialogue {
...
animation: ANIM_NAME 0.5s ease-in-out;
}
@keyframes ANIM_NAME {
0% { transform: rotateY(55deg); opacity: 0; }
100% { transform: rotateY(0deg); opacity: 1; }
}
Can anyone see why??
I'm creating a grid like pinterest and everything is working fine except that getting the height of items in the code is too slow.
in my code, I have to get the height of last added element and add it to the height of the row, so for the next item I can set the top position to the height.
here's the code:
testOne: function(itemArray, parent){
// layout
var layout = [];
for(i in itemArray_){
var item = itemArray[i];
var template = this.template(item);
// get smallest height
var smallestHeight = layout[0];
var smallestHeightRow = 0;
for(i in layout){if(layout[i] < smallestHeight){smallestHeight = layout[i]; smallestHeightRow = i;}}
// add item to screen
parent.append(template);
// add height of last item
var item = parent.find("[item-id="+item._id+"]");
item.css("top", smallestHeight+15+"px");
item.css("left", smallestHeightRow*25+"%");
var itemHeight = item[0].offsetHeight;
layout[smallestHeightRow] = smallestHeight+itemHeight;
}
},
but the problem is, this process is fast except for getting the height of the element.
so without getting the height, the function takes about 20ms
but getting the height adds another 75ms to the process and makes it about 95ms
now my question is, how can I make the determination of the height a lot faster?
I want to create a side panel with a right border that is almost 0px at the top but gradually increases to 5px at the bottom.
I am trying to avoid border images as I want to use least of external resources such as images.
How can I do that. I tried to search a lot for this but couldnot find it. So if somebody can point me to a similar question , that is also helpful.
Below is the link: http://ift.tt/1FI2Fzi
If you notice, the left is a div with a beige color border on left panel at right(left to image) which is having variable length.
In my directive i am using custom template. for that reason and my style purpose i am using element.replaceWith() - it works.
But when i update the collection the old elements and the data still exist. In case if i remove the element.replaceWidth() method it all works fine.
How can i use element.replaceWith() in the directive as well update the new collection?
code snippet:
element.html(getTemplate(scope.value, scope.index));
$compile(element.contents())(scope);
element.replaceWith(element.contents()); //using this old elements exist.
In my demo, please click on next button to load new collection.
so I'm new to frontend and JavaScript, coming from Rails but I'm working on a project for class and I'm having some trouble. Its a spotify clone, so far at this moment we're using just plain old JS. And I've been following along as such.
We're adding a play button so when you hover over a table row a play button appears where the track number exists and when your mouse leaves the row, the play button disappears but the track number does not reappear.
This is the main issue so far.
The next issue is when I run the console along side the browser window and hover over a row, I get the following error:
Uncaught TypeError: Cannot set property 'innerHTML' of nullBelow the
//The problem is occurring herecomment is where I think the issue is occuring but I've included the rest of the file just incase you need to see.
album.js
//Example Album
var albumPicasso = {
name: 'The Colors',
artist: 'Pablo Picasso',
label: 'Cubism',
year: '1881',
albumArtUrl: '/assets/images/album_covers/01.png',
songs: [
{ name: 'Blue', length: '4:26' },
{ name: 'Green', length: '3:14' },
{ name: 'Red', length: '5:01' },
{ name: 'Pink', length: '3:21' },
{ name: 'Magenta', length: '2:15' }
]
};
//Another Example Album
var albumMarconi = {
name: 'The Telephone',
artist: 'Guglielmo Marconi',
label: 'EM',
year: '1909',
albumArtUrl: '/assets/images/album_covers/20.png',
songs: [
{ name: 'Hello, Operator?', length: '1:01' },
{ name: 'Ring, ring, ring', length: '5:01' },
{ name: 'Fits in your pocket', length: '3:21' },
{ name: 'Can you hear me now?', length: '3:14' },
{ name: 'Wrong phone number', length: '2:15' }
]
};
var createSongRow = function (songNumber, songName, songLength) {
var template =
'<tr class="album-view-song-item">' +
' <td class="song-item-number" data-song-number="' + songNumber + '">' + songNumber + '</td>' +
' <td class="song-item-title">' + songName + '</td>' +
' <td class="song-item-duration">' + songLength + '</td>' +
'</tr>'
;
return template;
};
var setCurrentAlbum = function(album) {
// #1
var albumTitle = document.getElementsByClassName('album-view-title')[0];
var albumArtist = document.getElementsByClassName('album-view-artist')[0];
var albumReleaseInfo = document.getElementsByClassName('album-view-release-info')[0];
var albumImage = document.getElementsByClassName('album-cover-art')[0];
var albumSongList = document.getElementsByClassName('album-view-song-list')[0];
// #2
albumTitle.firstChild.nodeValue = album.name;
albumArtist.firstChild.nodeValue = album.artist;
albumReleaseInfo.firstChild.nodeValue = album.year + ' ' + album.label;
albumImage.setAttribute('src', album.albumArtUrl);
// #3
albumSongList.innerHTML =
'<thead>' +
'<tr>' +
'<th class="table-head-aligner">#</th>' +
'<th class="table-head-aligner">Title</th>' +
'<th class="table-head-aligner">Duration</th>' +
'</tr>' +
'<thead>'
;
// #4
for (var i = 0; i < album.songs.length; i++) {
albumSongList.innerHTML += createSongRow(i + 1, album.songs[i].name, album.songs[i].length);
}
};
var songListContainer = document.getElementsByClassName('album-view-song-list')[0];
var songRows = document.getElementsByClassName('album-view-song-item');
var playButtonTemplate = '<a class="album-song-button"><span class="ion-play"></span>'
//The problem is occurring in here somewhere
window.onload = function() {
setCurrentAlbum(albumPicasso);
songListContainer.addEventListener('mouseover', function(event) {
if (event.target.parentElement.className === 'album-view-song-item'); {
event.target.parentElement.querySelector('.song-item-number').innerHTML = playButtonTemplate;
}
});
for (var i = 0; i < songRows.length; i++) {
songRows[i].addEventListener('mouseleave', function(event) {
this.children[0].innerHTML = this.children[0].getAttribute('.song-item-number');
});
}
};
album.html
<!DOCTYPE html>
<html>
<head>
<title>Bloc Jams</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="http://ift.tt/1GIE5QB">
<link rel="stylesheet" type="text/css" href="http://ift.tt/1G498Ii">
<link rel="stylesheet" type="text/css" href="styles/normalize.css">
<link rel="stylesheet" type="text/css" href="styles/main.css">
<link rel="stylesheet" type="text/css" href="styles/album.css">
</head>
<body class="album">
<!-- nav bar -->
<nav class="navbar">
<a href="index.html" class="logo">
<img src="assets/images/blocjams.png" alt="bloc jams logo"/>
</a>
<div class="links-container">
<a href="collection.html" class="navbar-link">collection</a>
</div>
</nav>
<main class="album-view container narrow">
<section class="clearfix">
<div class="column half">
<img src="assets/images/album_covers/01.png" class="album-cover-art"/>
</div>
<div class="album-view-details column half">
<h2 class="album-view-title">The Colors</h2>
<h3 class="album-view-artist">Pablo Picasso</h3>
<h5 class="album-view-release-info">1909 Spanish Mountains</h5>
</div>
<table class="album-view-song-list">
</table>
</section>
</main>
<script src="scripts/album.js"></script>
</body>
</html>
For a particular layout that I am creating, I am required to center two elements horizontally in a div as though they were a single element as shown in this image.
Between these two, I also need to have a gap (as shown above) that remains definite even the the browser window width changes.
What would be the best way to do this with css?
I tried doing this floats inside the div but could not get the gap between the elements to be the same responsively.
I have also done some research online but in vain.
Any help would be appreciated.
Basically I have navigation bar inside my "main" div, and its indented to the left.
I cannot figure out where does this indentation come from, I tried padding/margin 0, padding-left/margin-left 0 but still nothing, It won't move even one inch!
I even tried mozilla firebug inspector to try to find out if I selected it right, basically no solution.
And here is html/css file if someone would have time to take a sneaky-beaky onto HTML code:
body {
background-color: #000;
color: white;
}
/* Style for tabs */
#main {
color: 111;
width: 600px;
margin: 8px auto;
}
#main > li, #main > ul > li
{ list-style:none; float:left; }
#main ul a {
display:block;
padding:6px 10px;
text-decoration:none!important;
margin:1px 1px 1px 0;
color:#FFF;
background:#444;
}
#main ul a:hover {
color:#FFF;
background:#111;
}
#main ul a.selected {
margin-bottom:0;
color:#000;
background:snow;
border-bottom:1px solid snow;
cursor:default;
}
#main div {
padding:10px 10px 8px 10px;
*padding-top:3px;
*margin-top:-15px;
clear:left;
background:snow;
height: 300px ;
}
#main div a {
color:#000; font-weight:bold;
}
#male, #female, #all, #new {
color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>2015 Race Finishers</title>
<meta charset="utf-8">
<link rel="stylesheet" href="my_style.css">
</head>
<body>
<header>
<h2>2015 Race Finishers</h2>
</header>
<div id="main">
<ul class="idTabs">
<li><a href="#male">Male Finishers</a></li>
<li><a href="#female">Female Finishers</a></li>
<li><a href="#all">All Finishers</a></li>
<li><a href="#new">Add New Finishers</a></li>
</ul>
<div id="male">
<h4>Male Finishers</h4>
<ul id="finishers_m"></ul>
</div>
<div id="female">
<h4>Female Finishers</h4>
<ul id="finishers_f"></ul>
</div>
<div id="all">
<h4>All Finishers</h4>
<ul id="finishers_all"></ul>
</div>
<div id="new">
<h4>Add New Finisher</h4>
<form id="addRunner" name="addRunner" action="service.php" method="POST">
First Name: <input type="text" name="txtFirstName" id="txtFirstName" /> <br>
Last Name: <input type="text" name="txtLastName" id="txtLastName" /> <br>
Gender: <select id="ddlGender" name="ddlGender">
<option value="">--Please Select--</option>
<option value="f">Female</option>
<option value="m">Male</option>
</select><br>
Finish Time:
<input type="text" name="txtMinutes" id="txtMinutes" size="10" maxlength="2" />(Minutes)
<input type="text" name="txtSeconds" id="txtSeconds" size="10" maxlength="2" />(Seconds)
<br><br>
<button type="submit" name="btnSave" id="btnSave">Add Runner</button>
<input type="hidden" name="action" value="addRunner" id="action">
</form>
</div>
</div>
<footer>
<h4>Congratulations to all our finishers!</h4>
<br>Last Updated: <div id="updatedTime"></div>
</footer>
<script src="scripts/jquery-1.6.2.min.js"></script>
<script src="scripts/my_scripts.js"></script>
<script src="scripts/jquery.idTabs.min.js"></script>
</body>
</html>
This is just for learning purpose, but I would really love if I could somehow solve this problem, biggest thing is that I have no clue where does it come from.
I have been working on this navbar template for a few days. Almost done, but it is not just as I wanted. Navbar is working fine, but how can I overcome spaces on four sides: 3px on the left (most probably 1px border+1px space+1px border) 10px on top, 10 px bottom, 33px on the right. Can you help me overcome them?
Second, Span class bars are not showing, the same code works on another page? What am I missing?
Here is the example of my template:
http://ift.tt/1RHZ6QD
I have a small problem with some of my code right now. I'm currently creating a navigation bar for a web page. Kind of like those that run across horizontaly across the screen. But my problem is that my navigation bar apparently has a really large height, disabling access to the content below it.
HTML:
<html>
<head> head.... <head>
<body>
<div id="nav_bar><ul><li><div class="nav_box"></div></li>..More LIs...</div>
</body>
</html>
nav_bar is positioned absolute with a top value. nav_box is usually hidden, and expands using css when hovered over a li. If you need anything, just comment. Thanks!
I have reached to a point in a project where I need to build something like (introduced in) iOS 7 photo collections, in which an array of photos is displayed and you can hover over any one of them to view the full size image.
Something like this
Looking through the webs I found this site Selfie City. That uses a similar technique in the graphs located at the bottom half of the page. On looking through their source code I discovered the effect was created in svg. I can recreate the same effect using divs but not SVGs.
Is there any advantage in using SVGs over divs for this effect? Will having a number of divs (100 in my case) effect the page's performance i.e. slow it down?
P.S : If someone can link me to a plugin or library that can be used to recreate this effect, it would be great. I have been looking but not quite found one yet.
I have a knowledge of HTML, CSS and Javascript. It is difficult to design website on Notepad++, and I think Dreamweaver is for beginners. Tell me how professional designers work? How websites like Facebook, Twitter are Designed?
Note: I am not talking about static website. I want to design dynamic website with PHP.
currently I want to use this rating system from http://ift.tt/1ebTRMj . But currently it works when you hover from right to left. Feel free to try it out in the link given. But I wanted to have a rating system which hovers from left to right.
I do not have any basic knowledge on css. Any answers would be very appreciated. Thank you.
&:hover {
//Apply styles to this and all subsequent radio buttons
/* This is the reason why it has to go from high-to-low
In CSS4, we should be able to use !, which will select
up the DOM (select elements _before_ this one) */
&:before, ~:before {
transition:none;
background:#2ecc71;
box-shadow:inset 0 0 4px rgba(0,0,0,0.4);
}
}
I was trying to get rid of my file extensions using .htaccess, it worked, but right now my CSS and images has stopped working. I have tried different things, but it's still not working. Please! I need help with this. Thanks in advance. All my php files are in the same directory which is the root folder and my css and image folder is in a different folder in my root folder. here is my code
RewriteEngine On
RewriteCond %{REQUEST_FILENAME}.php -f
RewriteRule !.*/.php$ %{REQUEST_FILENAME}.php [L]
RewriteRule ^(css|img) - [L]
This is how my page looks like.
This is code for same.
<table class="table table-bordered">
<tbody>
<tr>
<td>
<h4>Name & address</h4>
<div class="Name">
<input ng-model="Name" type="text" placeholder="Name" class="form-control"/>
</div>
<div class="Name">
<textarea class="form-control" ng-model="Address" placeholder="Address.." rows="4"></textarea>
</div>
<div class="Name">
<select ng-init="City=Chhatarpur" ng-model="City" class="form-control">
<option value="" ng-selected="selected">City</option>
<option value="Chhatarpur" ng-selected="selected">Chhatarpur</option>
</select>
</div>
<div class="Name">
<!--<input type="text" value="+91" class="form-control" size="2" disabled/>-->
<input ng-model="Mobile" type="text" placeholder="Mobile Number" class="form-control" maxlength="10"/>
</div>
</td>
<td>
<h4>Date/time of delivery</h4>
<div ng-if="(CurrentHour>=18 && CurrentHour<24) || (CurrentHour>=1 && CurrentHour<9)" >
<input type="radio" ng-model="order.delivery" value="5"> Tomorrow (09:00-12:00) <br/>
<input type="radio" ng-model="order.delivery" value="6"> Tomorrow (12:00-15:00) <br/>
<input type="radio" ng-model="order.delivery" value="7"> Tomorrow (15:00-18:00) <br/>
<input type="radio" ng-model="order.delivery" value="8"> Tomorrow (18:00-21:00)
</div>
<h4>Payment option </h4>
<input type="radio" ng-model="order.payment" value="Cash on delivery"> Cash on delivery <br/>
<input type="radio" ng-model="order.payment" value="Card on delivery"> Card on delivery
<button style="margin-top:20px;" type="button" class="btn btn-lg btn-primary btn-block" ng-click="">Place order</button>
</td>
</tr>
</tbody>
</table>
It looks like left column taking more width than right one. I want both columns should use 50% of screen width.
What is wrong here. Can some-one please help.
I have a signup page with two buttons. When one button is clicked, the corresponding container displays. When a button is clicked the bg color changes and sticks, even after I select the other button. Then, if I select the button again it goes back to its unselected/inactive color.
I want the clicked button to maintain its active color, but only if the other button is not clicked. If the other button is clicked, I want the first button to go back to its original bg color.
Here is the js:
<script type = "text/javascript">
function displayForm(c) {
if (c.value == "1") {
document.getElementById("container1").style.display = 'inline';
document.getElementById("container2").style.display = 'none';
} else if (c.value == "2") {
document.getElementById("container1").style.display = 'none';
document.getElementById("container2").style.display = 'inline';
} else {}
}
</script>
And here are the buttons (sorry for formatting issues):
<!--SELECTION BUTTONS-->
<form>
<div class="control-group">
<label class="control-label">Are you a:</label>
<div class="controls">
<p><div id="account-type" name="account-type" class="btn-group selection-buttons" data-toggle="buttons-radio">
<button value="1" type="button" name="formselector" onClick="displayForm(this)" id="button1" class="btn btn-info">
Buttons1</button>
<button value="2" type="button" name="formselector" onClick="displayForm(this)" id="button2" class="btn btn-info">Button2</button>
</div></p>
</div>
</div>
</form>
Here is the CSS (using Bootstrap):
/* SWITCH BUTTONS */
.selection-buttons button{
width: 140px;
height: 60px;
color: #FFF;
background-color: #FFB10D;
border-color: #fff; /* e59f0b */
}
.selection-buttons .btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .open .dropdown-toggle.btn-info {
color: #FFF;
background-color: #00CC66;
border-color: #fff; /* 00b75b */
}
Thank you!!
I have a button and when I click it, I want the html object (aka button) to be passed as a parameter to another javascript function. I want the javascript function to print the data-hi from the element in the button.
<button type = "button" onclick = "whoIsRdns(this)" class="dns-information btn btn-xs btn-info pull-right" data-toggle="modal" data-target = "#whois_rdns_modal" data-path="{{ path( '_who_is_rdns', { 'peer': peer.number, 'ip': peer.mac } ) }}" data-hi = "hi2">
<i class="icon-search"></i>
</button>
function whoIsRdns(thisButton){
//Enable jQuery properties from the param of the HTML object
var btn = $(thisButton);
var test = btn.data('hi');
console.log('Value is ' + test);
}
Why would test return as null?
I'm wondering if it's possible to merge the following two features of my .css together, making it less clogged and unprofessional.
.trl {
display: flex;
justify-content: center;
}
.trl > a {
margin: 0 25;
}
My attempts resulted with the content being displayed at the default left of the page.
I'm using angular. I have a input that looks like:
<input class="form-control" type="text" ng-model="newBook.color">
basically when this is changed, I want a div's background color to be changed.
My controller has some lines that look like:
$scope.newBook = {};
$scope.newBook.color = "";
$scope.color = ->
return "background-color: " + $scope.newBook.color;
and then the div I want to change:
<div ng-style="{{color()}}"></div>
However, I get the error: Error: [$parse:syntax] Syntax Error: Token ':' is an unexpected token at column 17 of the expression [background-color:]
I have the following code :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.mpanefset { top: 41px; left: 181px; position: fixed; width: 100%; height: 100% }
</style>
</head>
<frameset class="mpanefset" cols="*">
<frame src="action.html">
</frameset>
</html>
The code is meant to create a frame at location 181,41 with the src as action.html.
It loads the page, but does not position it at the location.
Any help is appreciated. Thanks.
I've got these css classes:
planning a span.icon {
background-image:url(../img/icon1.png);
background-position:left top;
background-repeat:no-repeat;
.planning a:hover span.icon {
background-position: left bottom;
}
In my template, I want to loop on an item (blurb) and dynamically update the value for the property background-image.
For now, I've tried to remove background-image from css class and added it in the template without success:
{% for blurb in page.homepage.blurbs.all %}
<div class="span4">
<a href={{ blurb.link }}>
<span class="img_icon icon" style="background-image: {% static blurb.icon %}"></span>
</a>
</div>
{% endfor %}
It ends up that the background-image property isn't attributed to the class icon.
Any idea to do the trick?
I want to store model fields as array of foreign keys to other atomic-Models. It makes model more flexible: I can add/remove/inherit(if it's tree node) any of predefined properties without programming.
Let's start with atomic-Models. It contain some classified properties.
class Liquid(models.Model):
volume = models.DecimalField(max_digits=12, decimal_places=6)
class Granular(models.Model):
weight = models.DecimalField(max_digits=16, decimal_places=9)
class Serial(models.Model):
lot_number = models.CharField(max_length=16)
estimated_release_time = models.DateTimeField()
deadline_time = models.DateTimeField())
I want to emulate the following code. It's not valid because:
1. I want to store foreign keys to several models (GenericForeignKey can help);
2. ArrayField doesn't support array of foreign keys yet;
class Entity(models.Model):
arr = ArrayField(models.ForeignKey(DifferentAtomicModels))
Emulation is the following. Where even numbers is pk of django.contrib.contenttypes.models.ContentType, odd numbers is pk of atomic-Model (atomic-model obtained from the previous even number).
class Entity(models.Model):
arr = ArrayField(models.IntegerField(), null=True, blank=True)
Well, in in django-admin changelist_view and changeform_view I want to replace arr field with the fields obtained from it.
What is the way to achieve this? Where it's better to intervene to django-admin behaviour (override formfield, make custom widget, smth. else...)?
P.S. What kind of emulation is better?
class Entity(models.Model):
em01 = ArrayField(models.IntegerField()) # "ContentType_pk", "Model_pk", ...
em02 = ArrayField(ArrayField(models.IntegerField(), size=2)) # "ContentType_pk", "Model_pk", ...
em03 = ArrayField(ArrayField(models.CharField(), size=2)) # "Model_name", "Model_pk", ...
em11 = HStoreField() # {"ContentType_pk": "Model_pk"}
em12 = HStoreField() # {"Model_name": "Model_pk"}
I'm learning django and python and I want to know how to indent this code properly. How should it be done?
{% block content %}
<h2>Nyinkommet</h2>
{% if request.GET.sorting == 'desc' %}
<form method="get" action=".">
<input type="hidden" name="sorting" value="asc">
<input type="submit" value="Visa äldsta ärende först">
</form>
{% else %}
<form method="get" action=".">
<input type="hidden" name="sorting" value="desc">
<input type="submit" value="Visa nyaste ärende först">
</form>
{% endif %}
we are using PYAPNS to send push notifications from an Django application to iOS devices running an phonegap application.
The server code looks like this:
def sendNotificationAPNS(title, message, targets, eventid):
apns = APNs(use_sandbox=False, cert_file='/path/to/push_cert.pem', key_file='/path/to/push_cert.pem')
# Send a notification
for token_hex in targets:
payload = Payload(alert=message, sound="default", badge=1, custom={'eventid':str(eventid)})
apns.gateway_server.send_notification(token_hex, payload)
print('Notification to APNS send!')
return true
On the mobile application the code from Phonegap Push Plugin looks like this:
// handle APNS notifications for iOS
function onNotificationAPN(e) {
if (e.alert) {
console.log('APNS Notifiation recieved: ' + e.alert);
// showing an alert also requires the org.apache.cordova.dialogs plugin
navigator.notification.alert(e.alert);
}
if (e.sound) {
// playing a sound also requires the org.apache.cordova.media plugin
var snd = new Media(e.sound);
snd.play();
}
if (e.badge) {
pushNotification.setApplicationIconBadgeNumber(successHandler, e.badge);
}
//eventid
if(e.eventid) {
console.log('APNS eventid: ' + e.eventid);
}
//custom
if(e.custom) {
console.log('APNS eventid: ' + e.custom.eventid);
}
}
The problem is: I don't get anything for e.custom or e.eventid?! What do I have to change to access the custom payload?
Thanks!
I am using Django's message framework.
When I have this view:
class ItemUpdateView(UpdateView):
model = Item
template_name = 'item_update_form.html'
fields = ['name',]
def dispatch(self, request, *args, **kwargs):
messages.success(request, 'test')
return super(ItemUpdateView, self).dispatch(request, *args, **kwargs)
def form_valid(self, form):
messages.success(self.request, "test")
return super(ItemUpdateView, self).form_valid(form)
it does show a message from the dispatch method but if I'm updating the object, the message from form_valid wont be shown.
What can cause the code not to show the message from form_valid?
I've just started learning Django and from the first tutorials i've followed or test i've done, it seemed to me (note: i'm a beginner at the whole web developing thing) that you can use it to do anything (back end as well as front end). Now thinking about the many frameworks and libraries for the front end I thought that I was missing something, so after a bit of research i came to the conclusion that the back end part is there only to provide a rest service to use with a front end framework. Do anyone for example uses the templates in Django, if so for what purposes? Am I missing something about front end - back end integration?
Thanks.
I have 2 models, Message and Attachment. I want to use these in one form. The Attachment should have a reference to the message (a message can have more than 1 attachment).
Models:
class Message(models.Model):
createdby = models.ForeignKey(User)
subject = models.CharField(max_length=200, null=True)
body = models.TextField(default=None, blank=True)
class Attachment(models.Model):
docfile = models.FileField(upload_to='documents/%Y/%m/%d')
message = models.ForeignKey(Message, null=True)
Forms
class MessageForm(forms.ModelForm):
class Meta:
model = Message
AttachmentFormSet = inlineformset_factory(Message, Attachment, extra=1 )
Views
class MessageCreateView(CreateView):
model = Message
fields = ["subject", "body"]
form_class = MessageForm
success_url = 'success/'
def get(self, request, *args, **kwargs):
"""
Handles GET requests and instantiates blank versions of the form
and its inline formsets.
"""
self.object = None
form_class = self.get_form_class()
form = self.get_form(form_class)
attachment_form = AttachmentFormSet()
return self.render_to_response(
self.get_context_data(form =form,
attachment_form=attachment_form,
))
def post(self, request, *args, **kwargs):
"""
Handles POST requests, instantiating a form instance and its inline
formsets with the passed POST variables and then checking them for
validity.
"""
self.object = None
form_class = self.get_form_class()
form = self.get_form(form_class)
attachment_form = AttachmentFormSet(self.request.POST)
if (form.is_valid() and attachment_form.is_valid()):
return self.form_valid(form, attachment_form)
else:
return self.form_invalid(form, attachment_form)
def form_valid(self, form, attachment_form):
"""
Called if all forms are valid. Creates a Message instance along with
associated Attachment then redirects to a success page.
"""
self.object = form.save()
attachment_form.instance = self.object
self.object = attachment_form.save()
return HttpResponseRedirect(self.get_success_url())
I tried many things, but for some reason the Attachment is never saved. There must be something missing in the form_valid() function, but I can't figure out what.
For completeness, here also the template:
<script type="text/javascript">
$(function() {
$(".inline.{{ attachment_form.prefix }}").formset({
prefix: "{{ attachment_form.prefix }}"
})
});
</script>
<form class="" action="/bugtrack/project/{{ project_id }}/tickets/{{ ticket_id }}/replyform/" method="post" id="replyform">
{% csrf_token %}
{{ form |crispy }}
{{ attachment_form.management_form }}
{% for formattach in attachment_form %}
{{ formattach.id }}
<div class="inline {{ attachment_form.prefix }}">
{{ formattach.docfile }}
</div>
{% endfor %}
<button class="btn btn-info pull-right btn-sm" type="submit" name="submit" value="createReply">Submit</button>
</form>
What would be the correct way to save the Message and Attachment correctly using a formset?