I have a search input form with four fields to choose from..User should select/fill in at least one field to display the results. If the user selects two fields then matching records of these two should populate and so on...i know this is easy using if-else in JS...but there should be some other better way for the search input form to display results....I am using bootstrap, angular js
Thanks in advance
I have a EditTemplate with a TextBox for search and display a field and a hidden field to store id value for the field (JQuery is used to this).
The problem is that the validation (client side and server side) puts the .input-validation-error class to the FooId element but I would like to add it to FooId__Search too.
In the case of server side validation I could just add a custom JQuery to check FooId and add css class to FooId__Search. However, is there something out of the box for this situation?
<input type="text" id="FooId__Search" value="Name of Foo" />
<input type="hidden" id="FooId" class="input-validation-error" value="" />
to
<input type="text" id="FooId__Search" class="input-validation-error" value="Name of Foo" />
<input type="hidden" id="FooId" value="" />
I am buidling a website using the responsive framework Foundation
I want to use their Reveal Modal to have an overlay pop up and display additional articles relating to the page they are on.
The reveal module works, but I've noticed inconsistencies. Chrome works fine, however in IE and Firefox the modal displayed a set amount of pixels from the top of the body instead of the top of the view port. As a result you have to scroll up to view the modal if the user has scrolled below the fold.
What I've Tried
This thread got me started on the right path
So I first tried editing the Foundation.js file. Line 3901
ORIGINAL
css.top = $(root_element).scrollTop() - el.data('offset') + 'px'; //adding root_element instead of window for scrolling offset if modal trigger is below the fold
REPLACEMENT
css.top = $(window).scrollTop() - el.data('offset') + 'px';
This did not work. So I tried to fix it using CSS
/*Learn More Overlay Fixes*/
.reveal-modal-bg{
height:2000px !important;
position:fixed;
}
.reveal-modal{position:fixed;
}
And this fixed the issue... in internet explorer and Firefox. Now chrome is displaying the image far below the middle of the screen like I want
Heres the fix in IE
But the result of Chrome
And opera gives me even weirder results. Putting the modal very far below the view port of the browswer.
I've done some research, and I'm aware of the letter-spacing CSS property, but is it possible to have different characters within the same word spaced differently?
I wouldn't be skipping any layers, so I couldn't accomplish this with using span tags every two letters.
.ex { letter-spacing: -2.0px }
.am { letter-spacing: -1.5px }
.pl { letter-spacing: -1.0px }
.e { letter-spacing: -0.5px }
<span class="ex">Ex</span><span class="am">am</span><span class="pl">pl</span><span class="e">e</span>
The functionality I'm looking for would be more like this, but I'm not sure it's possible:
.ex { letter-spacing: -2.0px }
.am { letter-spacing: -1.5px }
.pl { letter-spacing: -1.0px }
.e { letter-spacing: -0.5px }
<kern class="1">E<kern2 class="2">x</kern><kern3 class="3">a</kern2><kern4 class="4">m</kern3><kern5 class="5">p</kern4><kern6 class="6">l</kern5>e</kern6>
I appreciate any feedback, thanks!
It's because in fact I need a 5px or 10px border. Researching I figured out that borders cannot use percents - So, the alternative is to create a circle with a circle of 94% inside. but I cannot centralize it :( I can put this on center using side margins to auto, but I'm still can't get it centralised vertically. Any clue about the best way to put one circle inside another to simulate a border ?
.groupIconOuter {
background: red;
width: 100%;
height: 0;
padding-bottom: 100%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.groupIconInner {
background: blue;
width: 94%;
height: 0;
padding-bottom: 94%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
<div class="groupIconOuter">
<div class="groupIconInner"></div>
</div>
This is my first question!!
May I know how can we add an image with css to one corner of the box.![enter image description here][1]
I want this for my news website
Sorry, as i am very news website is not allowing me to attach image.
Thanks, Avinash
I have created a Bootstrap navbar and would like it so that when the webpages is displayed on a phone the navbar still works. As it currently is the button appears but nothing happens when you click on it. I have taken a look at Code Pen (http://ift.tt/1H67PvM) but their example doesnt work either.
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="true" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" >Leeds Market</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="homepage.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="stalls.php">Stalls</a></li>
<li><a href="products.php">Products</a></li>
<li><a href="basket.php">Basket</a></li>
</ul>
<form class="navbar-form navbar-right" method="post" action="loginsql.php" >
<div class="form-group">
<input type="text" placeholder="Username" name="Username" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" name="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
<a href="register.php" class="btn btn-success" role="button">Register</a>
<a href="traderlogin.php" class="btn btn-success" role="button">Trader</a>
</form>
</div><!--/.navbar-collapse -->
</div>
</nav>
I have this html that shows slideshow images using bootstrap 3 :
<div class="col-sm-8">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
<li data-target="#myCarousel" data-slide-to="5"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
{% for p in posts %}
{% if forloop.counter == 1 %}
<div class="item active">
{% else %}
<div class="item">
{% endif %}
{% if p.headimage %}
<img src="{{ p.headimage.url }}" alt="Image" width="460" height="345">
{% endif %}
<div class="carousel-caption">
<h3>{{ p.title }}</h3>
<p>{{ p.teaser }}</p>
</div>
</div>
{% endfor %}
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
I want caption to be shown below the image, not over it.
I tried to manipulate the html and css but could not achieve this, so appreciate your help.
I want to remove the scrollbars on my sidebar, you can have a look at this bootply:
http://ift.tt/1dRQ4Ea
I have tried some stuff like this
#sidebar{
width: 200px;
border: 1px solid #000;
height: 100%;
}
but I can't get it working properly
Anybody able to help me out? :)
Edit: The scroll function should still be active
I've embed a bootstrap datepicker from http://ift.tt/TgBoni
I want only the date and month and year to be displayed. But in this plugin I've date,month,year, and time. How do I remove only the time selection from this datepicker?
In a bootstrap navigation bar, I have a dropdown menu.
On smaller screen, the navigationbar is collapsed, and I get a button to toggle the visibility of the navigation bar items.
Since the only item that I have, is the dropdown menu, I feel it a little 'stupid' to have to first click to toggle the navigation visibility, and then click to drop down the menu.
I can see that what actually triggers the dropdown is the adding of class open to the dropdown menu - just like in seems to triggers the visibility of the collapsed navigation bar.
But how can I make the dropdown 'auto-dropdown' when the collapsed navigation bar is displayed?
A small fiddle to illustrate: http://ift.tt/1Kq9Z76
This is my design code. Problem is I have slider in which Image sizes I have set according to screen size. But my problem is content below slider is overlapping on slider part. What should happen is in any screen below slider that content should come. If I specify the min-image size then when screen size gets reduce it leaves lot of blank space.
HTML Code.
<!--slide-part-starts--><div class="slide-part">
<!--slider-starts--><div class="fadein">
<img style="cursor:pointer" onclick="window.location.href='http://ift.tt/1H67NnN'" src="BG Slideshow/1.jpg"><!--powerock-->
<img style="cursor:pointer" onclick="window.location.href='http://ift.tt/1Kq9YQx'" src="BG Slideshow/2.jpg"><!--powerpunch-->
</div><!--slide-ends-->
</div><!--slide-part-ends-->
<!--about-evio-starts--><div class="about-evio">
At EViO, we make tech gear that helps improve productivity,<br />
so that you have more time to do the essential things - living life to the fullest.
</div><!--about-evio-ends-->
CSS
.slide-part{
width:100%;
max-width:1600px;
margin:0 auto;
min-height:100px;
height:100%
}
.fadein {
position:relative;
width:100%;
max-width:1600px;
margin:0 auto;
min-height:100px;
height:100%
}
.fadein img {
position:absolute;
left:0;
top:0;
height:auto;
max-width:100%;
width: auto\9;
}
.about-evio{
width:100%;
text-align:center;
padding:50px 0 50px 0;
border-top:1px solid #000;
border-bottom:1px solid #000;
text-align:center;
min-height:20px;
background:#fff;
font-size:1.2em;
line-height:30px
}
I am having the following code:
<div>
<select>...</select>
<p>foo</p>
</div>
What is the cleanest way to center my dropdown <select> but keep the <p> left aligned?
I want to use the jQuery-ui .accordion function in a WordPress child theme. So far I've:
jQuery(document).ready(function($) { $( "#accordion" ).accordion(); });function myChild_scripts() { wp_enqueue_style( 'onepage-child-style', get_stylesheet_uri() ); wp_enqueue_script( 'onepage-child-accordion', get_stylesheet_uri() . '/js/accordion.js', array('jquery-ui-accordion', 'jquery'), 20150507, true );add_action function: add_action( 'wp_enqueue_scripts', 'myChild_scripts' );However, the .accordion function is also dependent on jquery-ui.css. Don't I also need to include that in the enqueueing process? I can find no documentation that discusses inclusion of this file - or whether it's already part of WP core.
I am using bootstrap so it would place my divs nicely next to eachother but whenever I resize my window to 991px width it makes these divs 100% width ...
code :
<div class="row">
<div class="col-md-2">
<img src="path..." style="width: 100%; height: auto">
</div>
<div class="col-md-2">
<img src="path..." style="width: 100%; height: auto">
</div>
<div class="col-md-2">
<img src="path..." style="width: 100%; height: auto">
</div>
<div class="col-md-2">
<img src="path..." style="width: 100%; height: auto">
</div>
<div class="col-md-2">
<img src="path..." style="width: 100%; height: auto">
</div>
<div class="col-md-2">
<img src="path..." style="width: 100%; height: auto">
</div>
</div>
picture (after resizing to 991px width):
I can't wrap my head around it and it probably is something I am overlooking, but when i want to align my rows in bootstrap, each row I add gets smaller.
Does someone know what I am doing wrong?
I have a site, on the index page I have 5 buttons around a picture. Without zoom everything looks like I want but when I zoom they get misplaced directly. I ried to use relative units instead of absolute ones but then it got worse.
My code:
.myButton4 {
position:absolute;
transition: .5s ease;
top: 25%;
left: 63%;
background-color:#B28F00;
-moz-border-radius:36px;
-webkit-border-radius:36px;
border-radius:36px;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Times New Roman;
font-size:19px;
font-weight:bold;
padding:16px 34px;
text-decoration:none;
text-shadow:0px 0px 0px #82797f;
}
.myButton4:hover {
background-color:#B28F00;
}
.myButton4:active {
position:relative;
top:1px;
Maybee someone can help me?
I have a bunch of elements that have a 50% border-radius to make a circle and a rotated element into them cropped by the border-radius and the 'overflow: hidden' property.
Up here it's all right.
The problem I have is when I make hover on any of that elements that ignores the crop and shows the other pseudo-elements ignoring the overflow property. I've tried on Firefox and is OK, but in Chrome I can't do anything to solve it.
<html>
<head>
<title></title>
<style>
.products {
margin: 0 auto;
max-width: 1280px;
text-align: center;
}
.post__product {
width: 260px;
height: 260px;
margin: 0 20px 5em;
overflow: hidden;
-webkit-border-radius: 50%;
border-radius: 50%;
position: relative;
display: inline-block;
-webkit-transition: all 250ms linear;
-moz-transition: all 250ms linear;
-o-transition: all 250ms linear;
-ms-transition: all 250ms linear;
transition: all 250ms linear;
}
.post__product:hover {
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
-o-transition: all ease 0.5s;
-ms-transition: all ease 0.5s;
transition: all ease 0.5s;
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
-o-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}
.post__product .rotated-element {
z-index: 0;
width: 300px;
right: -90px;
height: 200px;
bottom: -50px;
overflow: hidden;
position: absolute;
-webkit-transform: rotate(-50deg);
-moz-transform: rotate(-50deg);
-o-transform: rotate(-50deg);
-ms-transform: rotate(-50deg);
transform: rotate(-50deg);
background-color: rgba(33,38,41,0.5);
}
.post__product .title {
right: 0;
bottom: 0;
z-index: 1;
position: absolute;
}
.post__product .title h2 {
font-weight: 300;
}
</style>
</head>
<body>
<section class="products">
<a href="#" class="post post__product">
<article>
<img src="http://ift.tt/1EnTeoD" alt="" />
<!-- .title -->
<div class="rotated-element"></div>
<!-- .rotated-element -->
</article>
</a>
<!-- .post .post__product -->
<a href="#" class="post post__product">
<article>
<img src="http://ift.tt/1EnTeoD" alt="" />
<!-- .title -->
<div class="rotated-element"></div>
<!-- .rotated-element -->
</article>
</a>
<!-- .post .post__product -->
<a href="#" class="post post__product">
<article>
<img src="http://ift.tt/1EnTeoD" alt="" />
<!-- .title -->
<div class="rotated-element"></div>
<!-- .rotated-element -->
</article>
</a>
<!-- .post .post__product -->
<a href="#" class="post post__product">
<article>
<img src="http://ift.tt/1EnTeoD" alt="" />
<!-- .title -->
<div class="rotated-element"></div>
<!-- .rotated-element -->
</article>
</a>
<!-- .post .post__product -->
<a href="#" class="post post__product">
<article>
<img src="http://ift.tt/1EnTeoD" alt="" />
<!-- .title -->
<div class="rotated-element"></div>
<!-- .rotated-element -->
</article>
</a>
<!-- .post .post__product -->
<a href="#" class="post post__product">
<article>
<img src="http://ift.tt/1EnTeoD" alt="" />
<!-- .title -->
<div class="rotated-element"></div>
<!-- .rotated-element -->
</article>
</a>
<!-- .post .post__product -->
</section>
<!-- .products -->
</body>
</html>
I've made a Pen of this: http://ift.tt/1EnTeER
Thank you in advance and sorry for my english if I have made any mistake.
I have problem setting layout because one of my child divs makes goes out of it's parent div.
I have: header with 10% height, container with height 90%, and inside one 'div1' with height set to 90% and margin-top set to 10%. If I remove margin-top everything is ok, if not it goes out of parent size creating scrolls etc. (I want div1 height set, I dont need height set to auto etc.)
JsFiddle: http://ift.tt/1EnThk2
<body>
<div id="header">Header</div>
<div id="container">
<div id="div1">1</div>
<div id="div2">2</div>
</div>
</body>
body, html
{
color: white;
margin: 0px;
padding: 0px;
height: 100%;
}
#header
{
background-color: blue;
height: 10%;
}
#container
{
width: 100%;
height: 90%;
background-color: gray;
}
#div1 {
background-color: red;
float: left;
width: 15.67%;
margin-top: 10%;
margin-left: 1.5%;
height: 90%;
}
#div2 {
background-color: green;
float: right;
width: 100px;
width: 43.17%;
margin-right: 3.6%;
}
so im trying to make a simple contact form, follow the guide i have to two files, contact.php and the index.php
i want that couple of options will appear in my index.php file in the "Enquiry type" those options i put in array in th contact.php file like this:
<?php
class Contact{
public static $types = array(
1 => 'Product enquiry',
2 => 'Billing enquiry',
3 => 'Support enquiry'
);
}
i also connect this file with this code in the first line in the index.php:
<?php require_once('file:///D:/Simple%20Contact%20Form/Liberay/Contact.php'); ?>
, but after i tried lots of times i cant see in the drop down field any of that options, so probably its something with connection maybe? and when im tring out php things do i have to put it in local server as Xampp that it will work ?
this is the full code from index.php:
<?php require_once('file:///D:/Simple%20Contact%20Form/Liberay/Contact.php'); ?>
<!DOCOTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Simple contact form with PHP</title>
<link rel="stylesheet" type="text/css" href="file:///D:/Simple%20Contact%20Form/CSS/core.css"/>
</head>
<body>
<form method="post" id="formContact" class="large-8 large-centered columns custom">
<fieldset>
<legend>Simple Contact Form with PHP</legend>
<div class="large-6 columns">
<label for="first_name">First name: *</label>
<input
type="text"
name="first_name"
id="first_name"
placeholder="Your first name"/>
</div>
<div class="large-6 columns">
<label for="last_name">Last name: *</label>
<input type="text"
name="last_name"
id="last_name"
placeholder="Your last name"/>
</div>
<div class="large-6 columns">
<label for="first_name">Email address: *</label>
<input type="email"
name="email"
id="email"
placeholder="Your Email address"/>
</div>
<div class="large-6 columns">
<label for="type">Enquiry type: *</label>
<select
name="type"
id="type">
<option value="">Select one</option>
<?php if (!empty(Contact::$types)) { ?>
<?php foreach(Contact::$types as $id => $type) { ?>
<option value="<?php echo $id; ?>"><?php echo $type; ?></option>
<?php } ?>
</select>
</div>
<div class="large-12 columns">
<label for="enquiry">Enquiry: *</label>
<textarea name="enquiry" id="enquiry" placeholder=" Your message"></textarea>
</div>
<div class="large-12 columns">
<button class="button small">Send message</button>
</div>
</fieldset>
</form>
<script src="file:///D:/Simple%20Contact%20Form/jquery.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="file:///D:/Simple Contact Form/js/core.js"></script>
</body>
</html>
*soory if theres little bit a mess im trying my best (-:
I have the following CSS code:
#wrapper{
height:500px;
background: url('http://ift.tt/1cv6JwS');
}
#menu:before{
width:500px;
height:60px;
background: rgba(255,255,255,0.6);
content: "";
position: fixed;
top:0;
left: 0;
border-radius: 0 0 10px 0;
}
#menu{
position: fixed;
top:60px;
left: 0;
background: rgba(255,255,255,0.6);
height: 300px;
width: 60px;
border-radius: 0 0 10px 0;
}
#circle{
position: fixed;
width:150px;
height:150px;
border-radius: 150px;
background: #000;
top: 10px;
left: 10px;
}
#circle2{
position: fixed;
width:120px;
height:120px;
border-radius: 120px;
background: #fff;
top: 25px;
left: 25px;
}
#circle3{
position: fixed;
width:90px;
height:90px;
border-radius: 90px;
background: #000;
top: 40px;
left: 40px;
}
#circle4{
position: fixed;
top: 54px;
left: 54px;
}
.btn{
border: none;
display: block;
margin: 1px;
background: #fff;
width:60px;
height: 30px;
font-weight: 700;
font-size: 17px;
}
#plus{
border-radius: 30px 30px 0 0;
}
#minus{
border-radius: 0 0 30px 30px;
}
And following HTML code:
<div id="wrapper">
<div id="menu"></div>
<div id="circle">
<div id="circle2">
<div id="circle3">
<div id="circle4">
<button id="plus" class="btn">+</button>
<button id="minus" class="btn">-</button>
</div>
</div>
</div>
</div>
</div>
Could you help me to understand how I can achieve solution, which will make "transparent" black circles and I could see only image? If I make now this black color as - background: rgba(0,0,0,0). I can see "menu" bars and I'd like to not see them.
There's following link with example: http://ift.tt/1EnTdRz
Good afternoon everyone,
I've been working on a site, that's quite clean, and that White Space is annoying me, if anyone had this problem before and solved it, i appreciate your help.
Best Regards,
I've been trying hard for the past hours to switch from the left column to the right one. I mean, I'm trying to center vertically the text div inside the grey div.
I would love to get some of your help. I've read a lot of tutorials and forum answer but didn't get the expected result yet.
Any advice is more than welcome :)
.box-key-message{
height: 240px;
position: relative;
background-color: #eeeeee;
border-radius: 10px;
}
.box-key-message div {
display:inline-block;
vertical-align:middle;
padding: 20px;
text-align: justify;
}
.box-key-message span {
font-weight:bold;
font-size:16px;
color: #D5420F;
}
<div class="col-lg-4 col-lg-offset-1">
<div class="box-key-message">
<div>
<span> Gratuit</span>
<br /><br />
Notre service, qui vous permet d’accéder à des centaines d’étudiants, est complètement gratuit pour vous.
<br /><br />
Vous ne rémunérez que l’étudiant. Un acompte de 15% vous sera demandé au moment de la mise en relation. Le reste sera payé une fois tous les succès de votre mission atteints !
</div>
</div>
<br /><br />
<div class="box-key-message">
<div>
<span>Simple et Rapide</span>
<br /><br />
Remplissez cette page en 5 minutes pour publier une mission à tous nos étudiants.
<br /><br />
Vous recevrez alors le CV des étudiants intéressés par votre mission. Une fois l’étudiant sélectionné, la mission commence.
</div>
</div>
<br /><br />
<div class="box-key-message">
<div>
<span>Sans engagement</span>
<br /><br />
Les étudiants des Grandes Ecoles qui vous répondent sont qualifiés, motivés, disponibles et réactifs.
<br /><br />
Si malgré tout aucun profil ne vous correspond, vous n’avez aucune obligation de recruter un étudiant et poster la mission aura été gratuit.
</div>
</div>
<br /><br />
<div class="box-key-message">
<div>
<span>Et pour payer l’étudiant ?</span>
<br /><br />
L’étudiant vous facturera la prestation en direct à la fin de la mission.
</div>
</div>
</div>
I have an SVG background image embedded in a CSS file as a data url:
.what { background: url('data: image/svg+xml; utf8, <svg> ... </svg') }
I want another element to have the same background image, only in a different color, but I don't want to repeat the whole SVG code.
<div class="what one">...</div>
<div class="what two">...</div>
No Javascript, please.
None of the other related questions answered this, because the solutions given there rely on serving two different files, which I want to avoid because I want to minimize file size for mobile users.
I am trying to set one of div postion fixed so that it can be float like right side options.. I want to set set language col below the slider. I am using the flowing css for that
postion:fixed
display:block;
z-index:99999;
But I am unable to do so. Please tell me how can I do this. Here is the link of website
Below the slider the language dropdown col I want to make floating like right one
I hope you understand
Experts Please Give me solution
Ok I know I am just making a beginner mistake but I cant seem to figure it out. I was going to use the class jumbotron but find the text change is not what I want. I need to create a 100% width container-fluid with a row and col the 1st col will contain an image 50% of the screen. The other half needs to be centered vertically and horizontally to the image. The other issue is it needs to line up with the headlines directly below it. Here is my code and I will try and do a bootply for anyone trying to help me out.
Ok I am not sure how long I will keep that image there but here is a screen shot of what I have and the red rectangles are issues or where the module needs to be. http://goo.gl/CbpTAM
Bootply: http://ift.tt/1GToMnU
<style>
/* LESS Document */
/********* TMC QUERRIES *********/
@tmcGreen:#c0c920;
@tmcLightblue:#4fb4e1;
@tmcDarkblue:#003a63;
@tmcOrange:#c05d1a;
@tmcDarkgrey:#939598;
@tmcLightgrey:#c7c8ca;
/************ CUSTOM FONTS **************/
/************* BASIC STYLES **************/
a {
color:@tmcLightblue;
text-decoration:none;
}
a:hover {
text-decoration:none;
}
p {
margin: 10px 0;
}
body{
font-family:"Lato";
}
html,body {
height:100%;
}
/********* NAV STYLES *********/
.dividerNav{
height:4px;
background-color:#fff;
}
.navbar.navbar-default > .container{
border-bottom:1px solid @tmcDarkblue
}
.menu-toggle-text{
color:#4fb4e1;
}
.navbar-toggle{
border:none;
padding:9px 1px;
}
.navbar-toggle:hover .navbar-toggle:focus{
background-color:none;
}
.hover-dropdown{
background-color:transparent;
}
.hover-dropdown ul{
border: medium none;
border-radius:0px;
background-color: rgba(0,58,99,0.80);
padding: 25px 0;
}
.navbar .hover-dropdown li a{
color:#fff;
margin: 0 18px;
}
.header-list{
margin-bottom:4px;
margin-top:15px;
}
.navbar-brand{
text-indent:-999px;
max-width:234px;
width:100%;
height:auto;
}
.nav > li {
display: block;
position: static;
margin: 0 25px 0 0;
}
.subscribe-input, .form-control:focus{
box-shadow:none;
border-color:@tmcDarkblue;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar {
text-align: center;
margin-bottom:8px;
border-bottom:none;
border-top:0px;
border-radius:0px;
border-left:0px;
border-right:0px;
border-top:0px;
}
.modeSelector{
right:57px;
}
.dropdown a{
text-decoration:none;
}
.navbar .hover-dropdown li a:hover {
text-decoration:none;
color:@tmcLightblue;
}
.dropdown-menu{
width:100%;
text-align:center;
box-shadow:none;
border:none;
border-radius:0;
}
.modes{
border:1px solid @tmcDarkblue;
border-radius:0px;
text-align:left;
}
.modes li a{
color:@tmcDarkblue;
}
.modes li a:hover{
color:@tmcLightblue;
}
.user-input, .pass-input{
width:41.5%;
float:left;
}
.search-input{
width:82%;
}
.subscribe-input, .form-control{
border-radius:0px;
border-color:@tmcDarkblue;
color:@tmcDarkgrey;
float:left;
margin-right:4px;
}
.glyphicon-arrow-right{
color:#c05d1a;
}
.glyphicon-search{
color:#c05d1a;
}
.logo, .search-wrapper {
padding-top:39px
}
/********* HEADER STYLES *********/
.hero-image{
margin-bottom:50px;
}
.headlineHero a, .headlineHero a:hover{
color:#fff;
}
.heroWrapper{
position:relative;
margin:0 0 50px;
}
.heroText{
position: absolute;
top: 35%;
width: 100%;
}
.heroContainer{
margin: 0px auto;
}
.intro-text{
margin:0 auto;
background-color: rgba(106,69,52,0.32);
border: 2px solid #fff;
color:#fff;
text-align:center;
}
.intro-text h2 {
font-size:x-large;
margin: 15px 0 5px;
}
.headlineHero{
font-family:"lato";
font-weight:bold;
}
.intro-text h3 {
font-size:medium;
margin: 8px 0 10px;
}
.btn-default{
border-color:#c05d1a;
border-radius:0px;
}
.btn-hero, .hero-btn:hover, .hero-btn:active, .hero-btn:focus{
margin:0 auto;
color:#fff !important;
border:1px solid #fff !important;
background-color:transparent !important;
}
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
.glyphicon-hero{
color:#fff !important;
}
.image-responsive{
display: block;
height: auto;
width: 100%;
}
#navbar-collapse-2, #navbar-collapse-1{
position: static;
width: 100%;
z-index: 2147483647;
}
.nav > li.dropdown{
/*border-bottom:2px solid #fff;*/
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus{
color:@tmcLightblue;
background-color:none;
background:none;
border-bottom:2px solid @tmcDarkblue;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
background-color: transparent;
color:@tmcLightblue;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
background-color: transparent !important;
color: @tmcLightblue;
}
.navbar-nav > li > a{
border-bottom:2px solid #fff;
}
.btn-default:hover, .btn-default:focus, .btn-default.focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default {
background-color: #fff;
border-color: @tmcOrange;
color: #fff;
}
.glyphicon .glyphicon-search:hover {
color: #fff;
}
/********* HEADLINES *********/
.headlineBorder{
display:inline;
text-transform:uppercase;
border-bottom:3px solid @tmcGreen;
}
.headlineBorderblue{
display:inline;
text-transform:uppercase;
border-bottom:3px solid @tmcDarkblue;
}
.headlineBorderwhite{
display:inline;
text-transform:uppercase;
border-bottom:3px solid #fff;
color:#fff;
}
.btn-blue{
border-color:@tmcLightblue;
}
.btn-blue:hover, .btn-blue:active, .btn-blue:focus{
background-color:@tmcDarkblue;
border-color:#fff;
}
.glyphicon-menu-right:hover{
color:#fff !important;
}
.headlineGlyph:hover{
color:@tmcLightblue !important;
}
.btn-mobile-right {
border:none;
}
.btn-mobile-right:hover, .btn-mobile-right:focus, .btn-mobile-right.focus, .btn-mobile-right:active, .btn-mobile-right.active, .open > .dropdown-toggle.btn-default {
background-color: transparent;
}
.glyphicon-menu-right, .glyphicon-menu-left{
/*color:@tmcLightblue;*/
}
.glyphicon-menu-right:hover, .glyphicon-menu-left:hover{
color:#fff;
}
.fourXfour{
margin-bottom: 50px;
}
/********* INSIDE PAGE HERO IMAGE ************/
.insideHero{padding:0;}
.insidePagehero{
display: block;
height: auto;
width: 100%;
}
.halfHero{
padding:0;
}
.insideHerocolorPicker{
background:orange;
}
.pageIntroheadline{
display: inline-block;
color:#fff;
}
/********* HOMEPAGE MARKETING AREA *********/
.marketing-wrapper{
width:100%;
margin-top:50px;
margin-bottom:50px;
}
.mareting-section{
padding:0;
}
/************************* FLIPPING STYLES *******************/
.marketing-wrapper.container-fluid{
padding:0;
}
.marketing-wrapper h2{
margin-bottom:20px;
}
.flipperWrap{
padding:0;
}
.card {
width:100%;
max-width: 750.666px;
height: 611px;
margin: 0px;
display: inline-block;
clear:both;
}
.front, .back {
padding: 0px;
}
.front {
background-color: transparent;
}
.back {
background-color: transparent;
}
.card div{
}
.blogInside, .tmsInside, .globalInside{
margin:80px auto;
height:50%;
width:62%;
}
.blogBack{
background-color:@tmcOrange;
color:#fff;
padding: 0px;
}
.blogIcon{
background:url("../images/blogIcon.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
display: inline-block;
height: 38px;
width: 46px;
float:left;
margin:0 22px 0 0;
}
.tmsBack{
background-color:@tmcDarkblue;
color:#fff;
padding: 0px;
}
.tmsIcon{
background:url('../images/tmsIcon.png') no-repeat scroll 0 0 rgba(0, 0, 0, 0);
display: inline-block;
height: 38px;
width: 46px;
float:left;
margin:0 22px 0 0;
}
.globalBack{
background-color:@tmcLightblue;
color:#fff;
padding: 0px;
}
.globalIcon{
background:url('../images/globalIcon.png') no-repeat scroll 0 0 rgba(0, 0, 0, 0);
display: inline-block;
height: 38px;
width: 38px;
float:left;
margin:0 22px 0 0;
}
/**************** LEADERSHIP SLIDER STYLES *****************/
.leadershipSlider{
margin-top:50px;
}
.leadershipCol {
float: left;
}
.leadershipName{
color:#fff;
height:auto;
width:62%;
background-color:@tmcOrange;
padding:10px;
margin:-85px 0 0 38%;
border:1px solid #fff;
display:block;
float:left;
}
.leadershipName .glyphicon.glyphicon-menu-right.pull-right{
color:#fff;
margin:-8px 0;
}
.leadershipImg{
display:block;
float:left
}
#carousel-index{
margin:5px 0 0;
}
.thumbnail {
display: block;
padding: 4px;
margin-bottom: 0px;
line-height: 1.42857143;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
border-radius: 0; border: none;
background-color: transparent;
}
.carousel-control {
top: 0;
left: 0;
bottom: 0;
width: 15%;
opacity: 1;
font-size: 20px;
color: #fff;
text-align: center;
text-shadow: none;
}
.carousel-control.left {
background-image: none;
position:relative;
display:table;
height:45px;
width:45px;
}
.carousel-control.right {
left: auto;
position:relative;
right: 0;
background-image: none;
display:table;
height:45px;
width:45px;
}
.carousel-control {
padding-top:0;
}
.well{
background-color: transparent;
padding: 0px;
border: 0px solid #fff;
box-shadow:none;
border-radius: 0px;
margin-bottom: 0px;
}
.btn-darkBlue{
border-color:#fff;
background-color:@tmcDarkblue;
height:45px;
width:45px;
}
.btn-darkBlue:hover, .btn-darkBlue:active, .btn-darkBlue:focus{
border-color:#fff;
background-color:@tmcDarkblue;
}
.carouselNext, .carouselPrev {
color:#fff;
}
/**************** My Carousel Feed Styles ****************/
.myFeed .active{
background-color:@tmcDarkblue;
}
.carousel-indicators li {
background-color: rgba(0, 0, 0, 0);
border: 1px solid @tmcDarkblue;
}
.feedSlider{
margin-top:80px;
}
.myFeed {
bottom: 0px;
left: 0;
list-style: outside none none;
margin-left: 0;
position:relative;
text-align: center;
width: 100%;
}
.headlineBorderblue{
display:inline;
text-transform:uppercase;
border-bottom:3px solid @tmcDarkblue;
}
.headlineTitle{
padding: 4px 0;
}
.headlineGlyph{
color:@tmcLightblue;
margin:-25px 0;
}
.headlineGlyph:hover{
color:@tmcDarkblue;
}
.headlineWrapper{
border-bottom:1px solid @tmcDarkblue;
width:60%;
}
.headlineWrapper-green{
border-bottom:1px solid @tmcGreen;
width:60%;
}
.headlineWrapper-white{
border-bottom:1px solid #fff;
width:60%;
}
.myfeedDigit{
color:@tmcDarkblue;
font-size:5em;
float:left;
clear:both;
}
/******** BEGIN FOOTER STYLES *********/
.footer{
border-top:1px solid @tmcDarkblue;
margin:50px auto;
padding-top:25px;
}
.subscribeText{
color:@tmcLightblue;
margin:-4px 0 4px;
font-size:12px;
}
.subscribe-input{
width:78% !important;
}
.copywriteText{
color:@tmcDarkgrey;
font-size:9.5px;
}
.footerSocialwrapper{
float:right;
text-align:center;
}
.languageSelector{
float:left;
}
.subscribeForm{
float:right;
}
.subscribe-form{
float:none;
margin:0 auto;
width:100%;
}
.subWrapper {
float: left;
width: 100%;
}
.btnSubscribe {
float: left;
height: 34px;
width: 34px;
}
@media (max-width:@screen-lg) {
.card{
height:384px;
}
}
@media (max-width:@screen-md) {
.card{
height:300px;
}
.navbar-nav > li > a {
border-bottom: 0px solid #fff;
}
.modeSelector{
right:0px;
}
.search-input{
width:78%;
}
.user-input, .pass-input{
width:37%;
}
/*FOOTER*/
.footerSocialwrapper{
float:right;
margin:10px auto;
}
.footerSocial li{
padding-right: 5px;
padding-left:0px;
float:left;
width:20%;
display:inline;
height:auto;
}
.subscribeForm{
float:right;
}
.footerSocial {
margin: auto;
/* width: 100%;*/
display:inline-block;
}
.subscribe-input {
float: left;
width: 80% !important;
}
}
@media (max-width:@screen-sm) {
/*FEEDSLIDER*/
.headlineWrapper, .headlineWrapper-green, .headlineWrapper-white{
width:80%;
}
.mobile{
color:#fff;
}
.headlineHero{
font-size:small;
}
.heroText{
top: 15%;
}
.skills{
font-size:x-small;
}
.navbar-collapse{
background-color: rgba(0,58,99,0.80);
}
.navbar-nav{
margin:15px -15px;
}
.nav > li > a{
text-align:left;
padding-left:0px;
padding-right:0px;
color:#fff !important;
}
.nav > li > a:hover{
color:@tmcLightblue !important;
}
.nav > li{
margin:0px;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus{
border-bottom:0px solid transparent;
color:@tmcLightblue !important;
}
.navbar-brand{
max-width:156px;
margin:0 0 0 5px;
}
#navbar-collapse-2, #navbar-collapse-1{
position: absolute;
width: 100%;
z-index: 2147483647;
}
.subscribe-input{
border-radius:0px;
border-color:@tmcDarkblue;
color:@tmcDarkgrey;
float:left;
margin-right:4px;
}
.search-form{
background-color:transparent !important;
color:#fff;
}
.mobileSearch-btn{
border-color: #fff;
background-color:transparent;
}
.mobileSearch-btn:hover{
border-color: #fff;
background-color:transparent;
}
.glyphicon-search {
color: #fff;
}
.glyphicon-arrow-right{
color: #fff;
}
.mobileLogin{
text-align:left;
}
.login-control{
float:none;
}
.user-input, .pass-input{
margin:0 0 5px 0;
width:100%;
float:none;
}
.dropdown-menu{
text-align:left;
}
.mobileDropdown{
background-color: transparent !important;
border: 1px solid #fff !important;
color: #fff;
margin: 5px 0 0;
padding: 6px 13px;
display: block;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
background-color: #fff;
padding: 5px 0;
}
.mobileList{
background-color: #fff !important;
border-radius: 0;
padding: 0;
}
.navbar-nav .open .mobileList{
position:absolute;
width:100%;
}
.mobileList li{
padding:4px 14px;
border-bottom:1px solid @tmcDarkblue;
}
/*Footer*/
.footerSocial{
/*float:left;*/
}
.languageSelector img {
margin: 0 auto;
}
.footerSocial {
margin: 10px auto;
}
.footerSocial img{
height:auto;
}
.subscribe-input {
width: 82% !important;
}
.subscribeForm{
float:none;
height:auto;
margin:0 auto;
width:95%;
}
.subscribeArrow{
color:@tmcOrange !important;
}
.card{
height: 591px;
}
}
@media (max-width:@screen-xs) {
.card{
height: 275px;
}
}
</style>
<div class="container-fluid heroWrapper insideHerocolorPicker">
<div class="row">
<div class="col-sm-5">
<img class="image-responsive insidePagehero" src="images/aboutHero.jpg" alt="" />
</div>
<div class="col-sm-5 col-sm-offset-1 pageIntroheadline">
<div class="">
<div class="headlineWrapper-white">
<div class="headlineTitle">
<h2 class="headlineBorderwhite">ABOUT</h2>
</div>
</div>
<p>TMC is..... nisi ut aliquip ex ea commodo consequat. consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-5 col-sm-offset-1 fourXfour">
<div class="">
<div class="headlineWrapper-green">
<div class="headlineTitle">
<h2 class="headlineBorder">WELCOME</h2>
</div>
</div>
<p>TMC is..... nisi ut aliquip ex ea commodo consequat. consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
<a href="#"><button type="go" class="btn btn-default btn-blue"><i class="glyphicon glyphicon-menu-right"></i></button></a>
</div>
</div>
<div class="col-sm-5 col-sm-offset-1 fourXfour">
<div class="">
<div class="headlineWrapper-green">
<div class="headlineTitle">
<h2 class="headlineBorder">WELCOME</h2>
</div>
</div>
<p>TMC is..... nisi ut aliquip ex ea commodo consequat. consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
<a href="#"><button type="go" class="btn btn-default btn-blue"><i class="glyphicon glyphicon-menu-right"></i></button></a>
</div>
</div>
</div>
</div>
I'm working on dojo 1.6 and I use a dijit.form.Select widget. The problem I'm facing now is when I select a long text from the dropdown, it goes beyond the width of the widget. I want the string to be enclosed in the width allotted to the widget. I tried using the overflow: hidden attribute but it is not working. Please help. Here is the code segment which I'm working on.
this.dapNAME = new dijit.form.Select({
name : "NAME",
placeHolder : 'Enter Name',
maxHeight : -1,
style : {width: '265px'}
}, this.dapNAME);
I am trying to use a custom font on my website that I have uploaded in a google drive. The reason I have to take this route is, the particular site is blogger which does not allow me to upload custom font. I have read articles where they had suggested to use pro version of dropbox, but at this moment I am not planning to invest in a pro account. The Code I am trying to use as follows
<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: keycapsflf1-webfont;
src: url(http://ift.tt/1zJGooM);
}
@font-face {
font-family: keycapsflf1-webfont;
src: url(http://ift.tt/1zJGooM);
font-weight: bold;
}
div {
font-family: keycapsflf1-webfont;
}
</style>
</head>
<body>
<div>Testing</div>
</body>
</html>
But, this does not work. Any idea, what might be wrong?
I'm building an adaptive design using CSS and I'm wondering how I can keep things nicely aligned. Two examples so far: my page: http://ift.tt/1zJGo8o now, I would like to keep the check-rates_btn aligned with the titleimg as the browser window resizes but due to the image being set a width of 95%, I can't really keep things aligned. I'd also like to keep the logo nicely aligned with the image i.e. where it hangs over titleimg, I want to keep the room that it hangs over = to the distance on the right side to the border of the titleimg. I tried to depict what I mean here: The distances depicted with red lines should stay equal. How do I do this?
I have a push menu and it has an animated gradient but I only want it to animated/play when the menu is open, obviously for performance reasons.
My gradient plugin code is as follows:
// Animated Gradient
var colors = new Array(
[62,35,255],
[60,255,60],
[255,35,98],
[45,175,230],
[255,0,255],
[255,128,0]);
var step = 0;
var colorIndices = [0,1,2,3];
var gradientSpeed = 0.001;
function updateGradient()
{
if ( $===undefined ) return;
var c0_0 = colors[colorIndices[0]];
var c0_1 = colors[colorIndices[1]];
var c1_0 = colors[colorIndices[2]];
var c1_1 = colors[colorIndices[3]];
var istep = 1 - step;
var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]);
var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]);
var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]);
var color1 = "rgb("+r1+","+g1+","+b1+")";
var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]);
var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]);
var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]);
var color2 = "rgb("+r2+","+g2+","+b2+")";
$('#primary-menu').css({
background: "-webkit-gradient(linear, left top, right bottom, from("+color1+"), to("+color2+"))"}).css({
background: "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"});
step += gradientSpeed;
if ( step >= 1 )
{
step %= 1;
colorIndices[0] = colorIndices[1];
colorIndices[2] = colorIndices[3];
colorIndices[1] = ( colorIndices[1] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
colorIndices[3] = ( colorIndices[3] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
}
}
I have managed to only play the animated gradient when I open the menu but I'm having trouble stopping it when I close the menu, how can I do this?:
showmenu.onclick = function() {
if ($('nav').hasClass('visible')) {
// Closed menu code here
} else {
// Opened menu code here
// Initialise plugin when menu is open
setInterval(updateGradient,10);
}
};
I am trying to implement Guardian Egyptian font-family in my website. I have implemented font-face rules for remote referring. But in CSS it doesn't work. In fact, it doesn't change the font into Guardian Egyptian. Why?
Here is what I have tried:
Does anybody can explain me why input-group-addon stay above input field?
HTML
<div class="container">
<div class="row">
<div class="center">
<form class="form-horizontal" id="formLogin">
<div class="form-group">
<span class="input-group-addon"><i class="fa fa-at"></i></span>
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
<div class="form-group">
<span class="input-group-addon"><i class="fa fa-lock"></i></span>
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary btn-block" value="Login">
<a href="#" class="btn btn-default btn-block" id="linkRegister">SignUp</a>
</div>
</div>
</div>
</form>
CSS
.center {
width: 50%;
height: 50%;
margin: auto;
min-width: 225px;
max-width: 275px;
position: relative;
top: 180px;
}
Example http://ift.tt/1GToMnI
Thanks.
I am showing iframed popup inside which there is form where user enter information. Code for showing iframed popup is like this:
/* This method opens iframed dialog box */
function ShowPopup(Url, DialogTitle, W, H) {
/* Setting for dialog box */
$("#dialog").dialog({
title: DialogTitle,
autoOpen: false,
modal: true,
resizable: false,
width: W,
height: H,
open: function (ev, ui) {
/* Setting URL to open in iframe */
$('#ContentIframe').attr('src', Url);
},
close: function (event, ui) {
/* On close setting URL of iframe to empty so that next time it opens only with url which is passed to it */
$('#ContentIframe').attr('src', '');
}
});
/* Opening dialog box */
$('#dialog').dialog('open');
}
@* This is container which is open as popup *@
<div id="dialog">
<iframe frameborder="0" id="ContentIframe" src=""></iframe>
</div>
When I call ShowPopup method and pass Url to it, it displays form as I want. In form, for validation I am using jQuery Validation Engine it works fine. Only issue I am getting is: When error message displayed in popup it's displayed inside iframed popup and not outside. Also showing horizontal scroll bar after error message displayed like shown in reference image.
I tried to set value for z-index in CSS for error message popup higher like 999, 1500 etc. but it's not helping. Is it possible to showing error message popup above iframed popup so that it's displayed properly without horizontal scroll bar
I have a h3 link somewhere at the bottom of a page and not only does the link expand to the whole row, but also in a row higher than the h3 element. I'll explain better using this screenshot: Where the arrows are pointing at is where I can actually click the link outside of the h3 element (Become part of the innovation is the actual link). Any ideas on how to make the link be clickable only on the text and what is causing this?
How can I write this css into less:
border-radius: 10px / 20px;
normally css interpret something like :
border-bottom-left-radius: 10px 20px;
border-bottom-right-radius: 10px 20px;
border-top-left-radius: 10px 20px;
border-top-right-radius: 10px 20px;
but less compilers are stupid and is dividing 10px/20px = 0.5px
I have a Boostrap row that contains a variable number of columns. This number of columns is controlled by a CMS so it can be a higher number of columns that wouldn't fit on one row.
I need to find a way to nicely display all the columns (f.e. with an equal height).
<div class='row'>
<div class="col-lg-2"></div>
<div class="col-lg-2"></div>
<div class="col-lg-2"></div>
<div class="col-lg-2"></div>
<div class="col-lg-2"></div>
<div class="col-lg-2"></div>
<div class="col-lg-2"></div>
<div class="col-lg-2"></div>
<div class="col-lg-2"></div>
</div>
I already found some solutions to make all columns an equal height, however they don't work whenever you use more then 100% of the row to display columns.
This question already has an answer here:
I've been trying to find a solution for this problem for two days in a row now, but any posts that were close to this topic couldn't actually resolve it - there was always a difference that made the solutions impossible.
NOTE: I am using SASS/SCSS to minify my own code.
What I am trying to do is develop a CSS-stylsheet, that gets applied to all elements inside an element with a specific class - so far, no problem. But I need (to make it compatible with other stylesheets such as bootstrap) the possibility to set a new container element, like the one that applied the styles, inside the first container, that "resets" the values from my stylesheet.
Of course, a CSS reset isn't possible with current (-ly supported) versions. So I need to add something like a negative selector to all my selectors.
I tried the following:
.style-applier:not(.style-resetter),
.style-applier :not(.style-resetter) {
/* all the styles of my stylesheet */
}
And I am wondering, why this does not capture the elements in a div with class="style-resetter". The styles get applied to all elements that are children of a container with class="style-applier", though, so that part works. I don't want to rewrite the bootstrap code into mine though, and the styles of all other stylesheets that should be supported. Mine should just support the styles, but not the functionality that for example Bootstrap adds. I know I could re-define the styles, but that would mean far more could and a double-override of styles just to get back to the original styles... Not very great, and I need far more code.
Any Ideas? :/
As requested, here a little more specific code:
HTML:
<html>
<head>
HERE THE IMPORT FOR MY STYLESHEET COMES
HERE THE IMPORT FOR TWITTER BOOTSTRAP COMES
</head>
<body>
<div class="style-applier">
<p>This is a styled paragraph by my stylesheet</p>
<div class="style-resetter">
<p>This paragraph is not styled with my stylesheet, but in some way with bootstrap (just an example...)</p>
</div>
<div>
<p>This paragraph is styled with my stylesheet as well - the depth doesn't matter</p>
</div>
</div>
</body>
</html>
SCSS:
.style-applier:not(.style-resetter),
.style-applier :not(.style-resetter) {
p {
color: #f00;
/* whatever styles... */
}
}
That is at least how I wished it worked - my SCSS is obviously not working though (well, the style-resetter class doesn't work).
Because it was marked as duplicate for css3 not selector to test parent class:
The given solution of that question is what I tried in my code sample above via the
.style-applier :not(.style-resetter)
selector. Apparently that doesn't work for some reason though. Any ideas why? The elements in the sub-div are still affected of the styles defined in my stylesheet.
I'm trying to do something that I thought would take 2 minutes and instead has taken up 2 hours... When you insert an image into Wordpress, it automatically puts it into a paragraph. I'm trying to get subsequent paragraphs to wrap around the image, and nothing's working for me. My CSS is:
p img.alignleft{
float:left;
}
p{
float:left;
clear:none;
}
What the heck am I missing?!
I was wondering how I can achieve effect like on this page: http://ift.tt/1EnJuuw
On the left side there is panel which allows to adjust template. What I noticed is that I change color, different css is beeing used (blue.css, purple.css etc.) however everything happends "on fly" without reloading web page.
How was it achieved?
Can that be also applied to other elements on webpage like i.e. background changed from picture to video?
Okay so I am trying display the text on focus in the input field all i've done so far is this.
HTML
<form>
<span id="name">
Name : <input type="text" class="name" name="name" title="lust"/><br />
<span>ENTER NAME</span>
</span>
<span id="mail">
E-mail : <input type="text" class="mail" name="mail" /><br />
<span>ENTER NAME</span>
</span>
<input type="submit" class="button" />
</form>
CSS
#forms {
position: relative;
}
#name span, #mail span {
display: none;
}
input[type='text']{
border: 1px solid #008008;
border-radius: 5px;
background: #f1f1f1;
padding: 10px;
margin-bottom: 10px;
}
input[type='text']:focus {
background: #fff;
border: 1px solid #008080;
}
.assistant {
position: abosolute;
top: 0px;
}
Can anyone help me achieve this am I doing wrong or I am in correct path? I will be greatful if someone actually help me out.
Hey I am having the following html code :
<div class='col-sm-7 foo'>...</div>
<div class='col-sm-5 foo'>...</div>
and in my css:
.foo {
background-color: white;
}
I can't add some margin between them as they are taking the full width due to bootstrap. Though I would like to add a separator between them (10px or so) with no background-color. How can I achieve this (I have to use bootstrap for other reasons).
I'm having a problem with some text overflowing outside the parent's div. I tried with
element.style {
text-overflow: ellipsis;
overflow: hidden;
}
but to no avail.
Here is a JSFiddle with my code. Looks like the DD element goes outside the div. How can I force it inside?
Below, there is jquery script which calls Servlet by URL. At first i need to say that i have 2 separate projects. First is Dynamic Web Project which contains servlets etc. Second is simple Ratchet HTML-CSS-JS Project which of course contains some pages, scripts and css.
<script>
$(document).ready(function() { // When the HTML DOM is ready loading, then execute the following function...
$('#button').click(function() { // Locate HTML DOM element with ID "somebutton" and assign the following function to its "click" event...
$.get('http://localhost:8080/testuje/text', function(responseText) { // Execute Ajax GET request on URL of "someservlet" and execute the following function with Ajax response text...
$('#div').text(responseText); // Locate HTML DOM element with ID "somediv" and set its text content with the response text.
});
});
});
</script>
Here is my Servlet code:
package pl.javastart.servlets;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/text")
public class HelloWorldServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String text = "some text";
response.setContentType("text/plain"); // Set content type of the response so that jQuery knows what it can expect.
response.setCharacterEncoding("UTF-8"); // You want world domination, huh?
response.getWriter().write(text);
// Write response body.
}
}
The problem is, what should i put in $.get('http://localhost:8080/testuje/text', function(responseText)
to get servlet content after button click.
I have a fixed top navigation bar that stays on top of everything while the contents of the page are being scrolled. I noticed that in Chrome for iOS and Safari standalone mode, the fixed bar disappears on page unload before any of the other elements. How to make all the elements, regardless of the positioning, to disappear at the same time?
Demo: http://ift.tt/1EnLVgp Load the page in Chrome for iOS, repeatedly click refresh. Observe how the fixed div vanishes first, then the rest of the content, and finally the page is being redrawn.
I'm trying to create a visual only (no text, except for captions) style webpage.
To give this page the best look, I want each clickable box to be a different size.
Here's what i want.
__________________________
| | 2 |
| 1 |_______|
| | 3 |
|_________________|_______|
|_4_|_5_| 8 |
|_6_|_7_|_________________|
So far, i've got boxes 1,2 and 3. The problem I'm having is with 4,5,6 and 7. Because they are smaller than box 8, instead of what I want, I get them displaying like below, which breaks flow, leaves blank spaces, and extends the page further than one screen.
|_4_|_5_|_6_|_7_|
| 8 |
|_________________|
How do I format the code so the layout is as I want it?
My code is below, all foundation framework is standard.
<body class="blackbackground">
<div class="fixed" id="includeHeader"></div>
<div class="fullwidth row collapse">
<div class="large-8 medium-12 relative columns">
<a href="#" class="darken"><img src="img/r3gamersHome.png"/>
<div class="large-12 large-centered medium-12 medium-centered small-12 small-centered caption">
<h2 class="brighten">Portfolio</h2>
</div>
</a>
</div>
<div class="large-4 medium-12 relative columns border">
<a href="#" class="darken"><img src="img/r3gamersHome.png"/>
<div class="large-12 large-centered medium-12 medium-centered small-12 small-centered caption">
<h2 class="brighten">Contact</h2>
</div>
</a>
</div>
<div class="large-4 medium-12 relative columns border">
<a href="#" class="darken"><img src="img/r3gamersHome.png"/>
<div class="large-12 large-centered medium-12 medium-centered small-12 small-centered caption">
<h2 class="brighten">r3gamers.com</h2>
</div>
</a>
</div>
</div>
<div class="fullwidth row collapse">
<div class="large-8 medium-12 relative columns">
<a href="#" class="darken"><img src="img/r3gamersHome.png"/>
<div class="large-12 large-centered medium-12 medium-centered small-12 small-centered caption">
<h2 class="brighten">Portfolio</h2>
</div>
</a>
</div>
<div class="large-4 medium-12 relative columns border">
<a href="#" class="darken"><img src="img/r3gamersHome.png"/>
<div class="large-12 large-centered medium-12 medium-centered small-12 small-centered caption">
<h2 class="brighten">Contact</h2>
</div>
</a>
</div>
<div class="large-4 medium-12 relative columns border">
<div class="fullwidth row collapse large-4">
<div class="fullwidth row collapse large-4">
<div class="large-6 medium-6 relative columns border">
<a href="#" class="darken"><img src="img/r3gamersHome.png"/>
<div class="large-12 large-centered medium-12 medium-centered small-12 small-centered caption">
<h2 class="brighten">About Me</h2>
</div>
</a>
</div>
<div class="large-6 medium-6 relative columns border">
<a href="#" class="darken"><img src="img/r3gamersHome.png"/>
<div class="large-12 large-centered medium-12 medium-centered small-12 small-centered caption">
<h2 class="brighten">About Me</h2>
</div>
</a>
</div>
</div>
<div class="fullwidth row collapse large-4">
<div class="large-6 medium-6 relative columns border">
<a href="#" class="darken"><img src="img/r3gamersHome.png"/>
<div class="large-12 large-centered medium-12 medium-centered small-12 small-centered caption">
<h2 class="brighten">About Me</h2>
</div>
</a>
</div>
<div class="large-6 medium-6 relative columns border">
<a href="#" class="darken"><img src="img/r3gamersHome.png"/>
<div class="large-12 large-centered medium-12 medium-centered small-12 small-centered caption">
<h2 class="brighten">About Me</h2>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
Does CSS affects HTML semantics?
For example, Hiding the bullets of ordered list (<ol><li>) and using an image instead. Will it be treated like unordered list after applying the CSS?
Thanks!
Here is what I have. It isn't reading the value correctly.
HTML:
<a class="InterestLink">Click me</a>
<div id="InterestExpander">
<div id="InterestExpanderX">
×
</div>
<br><br>
General Rating:
<span class="RatingGeneralNumber">80%</span>
</div>
CSS:
<a class="InterestLink">Click me</a>
<div id="InterestExpander">
<div id="InterestExpanderX">
×
</div>
<br><br>
General Rating:
<span class="RatingGeneralNumber">80%</span>
</div>
jQuery:
$('.InterestLink').click(function() {
$('#InterestExpander').fadeIn(450);
if (parseInt($('.RatingGeneralNumber').val()) > 50 ) {
$('.RatingGeneralNumber').css({"color":"green"});
}
});
$('#InterestExpanderX').click(function() {
$('#InterestExpander').fadeOut(250);
});
Also, another question while I'm here. This site will have links to multiple different movies. Each time they click on a movie link, the same div will pop up, but with a rating unique to the movie based on what the database says.
Would the span be containing the movie rating be more appropriate as an "ID" or "Class" type, or neither?
I want to hide black arrow while clicking green arrow.. without using jquery
My fiddle:
enter code here
Please anyone help
I know this sounds too simple but I am unable to place one div below the other div , and my code is
html:
<div id="gamediv"></div>
<div class="style"></div>
css:
.style {
width:728px;
height:90px;
margin-left:auto;
margin-right:auto;
}
So i was wondering if anyone could direct me in the right path for designing a one page website with sections. As you scroll down, you move down to the next section of the website. I want to have one page where I can scroll down through many different sections.