FAQ Database Discussion Community


How to define style to layout-margin flex variants, using Angular Material

css,angularjs,angular-material
I want to have different margins for flex and flex-sm tags: <div layout="row" layout-margin layout-wrap> <div flex="30" flex-sm="100" ng-repeat="occasion in resultObject.occasionTypes[typeIndex].occasions"> ------------ </div> </div> I tried to use something like: [layout-margin] > [flex] { margin: 3px; } [layout-margin] > [flex-sm] { margin: 0px; } But it doesn't work. Is there...

Google map infowindow position on custom marker

javascript,css,google-maps,google-maps-api-3
I'm not using the Markers in Google Maps because I wish to render custom text and images on my marker, so what I did is a custom marker using Overlays. The Overlay position is not exactly like the marker so I played a bit with it and now it is...

JQuery Animate() showing sticky behaviour with other elements in the same class

jquery,css,web
for some reason all the .inner-card elements show some kind of animation, it is as if they are all erratically calculating their positions, instead of just the one element with the mouse hovering over it being animated cleanly. any idea how can i fix this ? Link to Code HTML:...

in a table want to include sale price but it inserts into a new cell and not the same [on hold]

php,html,css
I'm not actually using a table i'm using a list but formatting it like a table but I'm having an issue where I want to include a sale price and an original price in the same cell but if I put them in div's it splits them up into two...

How to reduce the size of picture on the background?

css
I have a picture size: 240px/240px. This size of picture must be only on wide screens, on mobile this picture must be 80px/80px. What I have ever tried: .picture{ height:100%; min-height: 240px; background: url("../../img/picture.png") no-repeat; background-size: cover; background-position: 50% 50%; } @media screen and (max-width: 480px) .picture { height: 80px;...

1px white spacing in Chrome between div's

css,google-chrome
JSFiddle: http://jsfiddle.net/lustre/c6cwbjLz/13/ Basically, I've been trying to make a full-screen 3x2 grid, and have essentially achieved it, however I'm seeing a tiny 1px vertical line between the 2nd and 3rd columns when I hover over the grid items. Where is this coming from, and how do I get rid of...

mobile friendly CSS multi column layout that doesn't suck like flex

android,html,css,flex
I implemented a flex multi column layout, got it to look great on my desktop, then looked at it on a mobile device and it was complete trash (all scruntched together, ignoring width parameters completely). Played with it for hours and everywhere I went on the internet said flex sucked...

Dynamically resize side-by-side images with different dimensions to the same height

javascript,html,css,image
I have two images side-by-side within a block-level container with arbitrarily different dimensions (as in, they could be any two images) that I want to dynamically adjust the width of so that the overall height of the two images is the same. I don't think this can be done in...

WordPress expanding grid with thumbnail

javascript,css,wordpress,grid,expand
I'm using codrops solution to display team members in an expanding grid: http://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/ I was already able to change some code to display my post thumbnail in the grid preview. However, I want to display the same picture in full size in the expanded view. In the original version it...

drop down menu toggle does not work

jquery,html,css,css3
So I am trying to create a dropdown menu using jQuery and I have tried several things. I tried using .hover(), .click(), and mouseenter() for the user's action, but nothing seems to work. I even tried toggle() and slideDown() for the event but nothing shows up on the screen when...

add value to existing class in jQuery

javascript,jquery,html,css
EDIT - included the page where the problem is visualized - http://www.openmindedmedia.nl/testfase/julius/ First of all, I have searched quite some hours to find this.. I presume it has an easy fix but I'm really new to jQuery and Javascript, so I'm here for your help. The problem I'm working with...

How do I put my index.html in the same folder as my other .html files on github?

html,css,github
So I just started web development an began building my portfolio. Although most of my content is on the same page and most links redirect to different websites, I do have one link that redirects to a different page of my website. So the content changes but the navigation bar...

How to code a 5-state toggle link

jquery,html,css
I have a HTML table where some TDs have inline styles, title tag and links I would like that users could hide these elements by pressing repeatedly the same icon so that, for example, the first click removes styles only, the second click removes links only, the third click removes...

change icon on collapse in Bootstrap 2.3 not in bootstrap 3

javascript,jquery,css,html5,twitter-bootstrap
I am using bootstrap 2.3 collapse in my project. I need to change icons on collapse means on show and hide I need to change icons. with bootstrap 3 some shown and hidden functions are showing in internet but I need with Bootstrap 2.3. Please let me know how to...

Render list starting from the bottom of its container

css
Trying to make a drop down, but struggling to figure out how to make the dropdown start below the button. I have this: https://jsfiddle.net/wg4apx2q/ <div> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </div> <style> div{ width: 200px; height: 100px; background: #ddd; position: relative; } ul { } li {...

Changing font-size of
  • on wordpress
  • css,wordpress,html-lists
    I am adding some pages on a wordpress themed website. There is a table with 3 columns: 1st column will be the title (larger font). Since it looks better and editing is easier, I started using <ul> instead of <td> Even though it works fine on JSFIDDLE font-size on the...

    fit items to container's width

    javascript,jquery,html,css
    I have 10 items in a container and each of them has margin from right hand side. With jquery, I am removing margin for every fifth item, but as the container's width is in percentage and item's width is in percentage as well, when I minimize or maximize my screen,...

    CSS drop down navigation

    css,html5,css3,drop-down-menu,navigation
    I'm sure this is something simple I'm missing... My drop down menu is opening within the main navigation, widening it. Here is a link to the page I'm working on. The issue is with the navigation below the App buttons. http://membershq.incentiveusa.com/AwardPages/GoalUp_Test2/index_test3.html# Here is my HTML: <div class="container-fluid"> <div class="section-title2 text-center">...

    Can I uniquely identify 2 check boxes so that I can add a different image to each?

    html,css,asp.net,checkbox
    Currently I am using an image for checked and unchecked checkboxes the html and css is below. <div class="text-field-box text-field-box-mobile radio-button-box small"> <asp:CheckBox ID="ChkOffer1" text=" " runat="server" class="checkbox checkbox-mobile radio" Visible="true" EnableViewState="true"></asp:CheckBox> <% Response.Write(Session("Offer1"))%> </div> and css input[type=checkbox] { display:none; } input[type=checkbox] + label { background-image: url("checkbox-default.png"); background-repeat: no-repeat;...

    Select n elements from hover event

    javascript,html,css
    I would like to select n elements from the element recieving the hover event. Is this possible in CSS? E.g. In the example below, could I write CSS to select the next 2 items from the item reciving the hover event? <div class="row"> <div class="col-md-1 item"></div> <div class="col-md-1 item"></div> <div...

    How to set DIV's width based on CSS indexes

    html,css
    I have 6 floated DIVs in two rows. I use PocketGrid as CSS framework (in particular its "automatic rows" feature) and I would like to size each one using CSS indexes and not specific class name. I tried it in this jsFiddle but even if first 3 blocks (first row)...

    tag in HAML

    html,css,haml
    How do I create a I-tag in haml? Example: <i class="fa fa-search"></i> ...

    Difficulty applying two different scripts

    javascript,jquery,html,css
    I have this script embedded on the index page of my site: $(document).ready(function(){ $(".bgtoggle").click(function () { $(".metro").toggleClass("bgcolorchange"); }); }); The CSS classes the script refers to look like this: .bgcolorchange { background-image: url("../images/mthc/imageN.jpg"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; overflow : hidden ; margin:0; padding:0; z-index:3; } .metro...

    How to position div which contains font-awesome icons to centre of another div?

    jquery,html,css,css3
    I'm trying to position div which contains font-awesome icons to centre of another div but i cannot make it in the right way. I have following code: HTML: <div id="menuRightSide" > <div class="rightSideMenuItem"> <div class="fa fa-facebook fa-2x rightSideMenuItemIcon" ng-click="redirectToGamePage();" id="repeatIcon"></div> </div> <div class="rightSideMenuItem"> <div class="fa fa-twitter fa-2x rightSideMenuItemIcon" ng-click="redirectToGamePage();" id="repeatIcon"></div>...

    How do I specify a css margin-top for foundation row div?

    css,zurb-foundation
    How do I specify a css margin-top for foundation row div? Using the Chrome dev tools it looks like foundation.css is overriding any margin properties for .row divs - regardless of where I put the css. In the interest of getting something out the door today I have resorted to...

    show div only when printing

    javascript,html,css
    Let's say that I have <div id="printOnly"> <b>Title</b> <p> Printing content </p> </div> Is it possible to hide this div when page rendering and to show only when printing this div?...

    Top header 100% of screen, but body only 70%?

    html,css
    Pretty new to CSS and just having quite a bit of trouble, I've tried everything, searched here, but can't seem to make it work. Right now my header/body are both 70% of the screen. However I want my top header (.mainheader) to be 100% of the screen, but have the...

    How can I make a list horizontally scrollable without items going to the second line?

    html,css
    I have a list of items: <div class="dates-bar"> <ul> <li>1</li> <li>...</li> <li>30</li> </ul> </div> I need this bar to be in a single line. I don't know how to achieve that. I have tried the following: .dates-bar { width: 100%; overflow-x: scroll; } .dates-bar ul { width: 500%; } .dates-bar...

    fill an html table by column instead of row?

    html,css,table
    '<table> <tr> <th>' .$varProduct[$x][0]. '</th>'. //this is a title '<th>' .$varProduct[$x][2] . $varProduct[$x][11] . ' </th> // this is a price </tr> </table>' this code makes a table that fills out like this Title Price Title Price Title Price but I want to fill it Title Title Title Price Price...

    Iframe does not show scrollbar

    html,css,angularjs,iframe,ionic
    Can't seem to make the iframe appear with a scroll-bar. Go to https://billiving-qa.azurewebsites.net/accountant email: [email protected] pass: 111111 Reload the list with F5, then click new invoice on the right side. The content is lengthy but doesn't show the scroll-bar. My css uses the following: .frm { position: fixed; width: 100%;...

    Aligning two elements in a container using css?

    html,css
    I like to make my navigation bar and header all the same, but I can't get the navigation bar to align properly. Using float: right doesn't work, as it appears to take it out of the container (if that makes sense) My code is here: https://jsfiddle.net/AVY7T/228/...

    How to make an element disappear by clicking off it

    javascript,jquery,html,css
    I want to make a search that displays results right underneath it in a div that displays above other elements on the page (like an auto-complete or the address bar on chrome). I want to the results to stay visible wherever the mouse is, but disappear if the user clicks...

    How to make background body overlay when use twitter-bootstrap popover?

    html,css,twitter-bootstrap
    Currently I used this twitter-bootstrap popover: <button type="button" class="btn btn-default" style="margin-top:11px; padding-bottom:4px; padding-top:4px;" data-container="body" data-toggle="popover" data-trigger="focus" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Upgrade The output: How I can make the background overlay like bootstrap modal? My expected output I use this jquery to popover $(function(){ $('[data-toggle="popover"]').popover({ placement...

    CSS mystery: why the extra height in my div's?

    javascript,css,wordpress
    I'm just starting in on a new site and am getting extra space at the top of the div's I'm building for the home page. Using Safari's Web Inspector, I've eliminated any obvious padding or margins being responsible; but it's also seemingly telling me that the height of the div's...

    Button not center align in Safari

    html,css,safari,center-align
    Button not centered align in Safari browser JSFIddle HTML <div class="" style=" width: 100%; "> <input value="Button" class="center-block" type="submit" style=""/> </div> CSS .center-block { display: block; margin-right: auto; margin-left: auto; } Above problem just come in safari, in chrome and firefox it is ...

    Div with the form of a pencil [duplicate]

    html,css,css-shapes
    This question already has an answer here: CSS triangle custom border color 2 answers How can i create a div with the form of a pencil, just like this: It seems a basic thing but im trying to do it since some time ago and still couldnt do it....

    Add Extension to Index File

    html,css
    I've been searching online for an answer to this but I can't seem to find anything which can help. I was wondering if its possible to open a index.html file with an extension after the .html (for example it would open a file like this - index.html?lc=uk) automatically when you...

    styles css in embeded souncloud player

    css,iframe,styles,embed,soundcloud
    I am trying to make a small site I use embed code to display soundcloud music in webpage. however, I want to remove the orange button play and the player down my iframe . I am researching I found that I could do it with css, just hidden buttons ....

    How do you make a div only extend in one direction when the outer container size increases?

    javascript,html,css,css3,layout
    I'm trying to make a a page container with a navigation bar on the left (inside of the container). When the outer page is wider than the container, I would like just the navigation bar to extend left up to a certain size while the rest of the container's contents...

    change the pop-up image width and height in fancybox [duplicate]

    javascript,jquery,html,css,fancybox
    This question already has an answer here: Custom width and height on fancybox image 1 answer I'm trying to change change the pop-up image width and height in fancybox but i'm being unsuccessful, i'm not sure what to change in the jquery.fancybox.css. Any help? JSfiddle: http://jsfiddle.net/uZCC6/5191/ HTML: <a class="fancybox"...

    Load resources via CDN or minifiy/concat and serve yourself? [on hold]

    javascript,css,minify,bundling-and-minification
    When serving static css/js/etc resources one has the option to use a cdn or to use your own server. With a CDN you include many includes but they can already be minified. Alternatively you may minify and concatenate all the files into one css bundle and one js bundle. Which...

    What is the best way to make your text stay in the same line as your icons?

    html,css
    I'm trying to achieve this UI here I've tried CSS <style type="text/css"> #cb-key-danger{ width: 15px; height: 15px; background-color: #F46E4E; } #cb-key-warning{ width: 15px; height: 15px; background-color: #F9C262 ; } #cb-key-success{ width: 15px; height: 15px; background-color: #ADB55E; } .cb-key-row{ background-color: #E2E2E2 ; font-size: 10px; } .cb-key-row span { display: inline; }...

    Fit an image inside a div that also has a title?

    html,css,css3
    Here's my fiddle Here's my HTML: <div class="block"> <h2>Title</h2> <img src="http://icons.iconarchive.com/icons/martz90/circle/512/camera-icon.png" /> </div> I'm trying to have an image inside my block. I want to size the image so that it fits inside the block fully. I've tried with height 100% but the title of the block is not taken...

    Round edges on shorter side in CSS [duplicate]

    css,css3,css-shapes
    This question already has an answer here: Border-radius in percentage (%) and pixels (px) 1 answer I want to make my text input have rounded edges on the shorter side, which is vertical side. The effect I need looks like this: If I use border-radius: 50%;, which makes corders...

    Exit Div Only On Click Of Background With Javascript(Jquery) [For Popup]

    javascript,jquery,html,css
    I am in a bit of a predicament. I have a popup currently, and I would like the popup to close when either the background is clicked, or the "ex out" button is clicked. Problem is, it will close the popup when the main box is clicked. Here is my...

    How To Check Value Of String

    javascript,css,string,numeric
    <span id='amount'>0.00000000</span> <a class='button-withdraw' id='tombolco' href='#'>Checkout</a> <script> var amount = document.getElementById("amount").innerHTML; if (amount >= 0.001) { document.GetElementById("tombolco").style = "display:block"; } else { document.GetElementById("tombolco").style = "display:none"; } </script> Why my code doesn't work? What's wrong with it and how to solve it?...

    Scroll multiple divs vertically

    javascript,jquery,html,css
    I have a structure divided into 4 sections. In one of the sections I have 3 divs inside a parent div. I have given height to the parent div so that at a time only one inside div is visible. Now when I scroll, I want the visible div to...

    Divs placed relative to image on window resize (almost works)

    jquery,html,css
    I have 3 "pins" that are placed within a div (#outerdiv). The div has a background-image and the pins should be on the same spot on the background image at all the times when resizing window. It works with #pin1, but not with #pin2 and #pin3 (which uses the same...

    Is There Dreamweaver Spry Alternatives? [on hold]

    php,html,css,dreamweaver
    I am currently trying to find an alternative to the Spry Validation Confirm that Dreamweaver CS6 used to have. I upgraded to CC recently and I want to find an alternative that works similarly to Spry Validation Confirm function. Thank You In Advance Stephen...

    CSS on hover image blinking issue

    css,hover,blinking
    I tried to make a simple css hover but got blinking image issue. Would you please advise me where I made mistakes? In the meantime, there is a empty gap between a H3 title and .term-image class because of my css settings for a class (.term-desc). Is there a way...

    Block elements inside button element acts unexpected

    css
    I am trying to create a button that shows a loading spinner when waiting for a response. But there is some weird things going on which I do not understand at all. I have the following HTML with a bunch of CSS: <button type="submit" disabled="true" class="btn btn-blue btn-loading"> <div class="btn-loading-text">Update...

    Bring div to front on fixed position

    javascript,jquery,html,css
    I used fixed position for a div in a webpage to stick the div as a a header on the top, but on scrolling it comes behind all other objects like divs, videos and even text! Here is the div as it should look at all times: How the div...

    Change result based on selection dropdown Option

    jquery,css
    I created a small form that calculates the amount of people with the amount they would like to spend, based off a per person instance or the group as a whole: https://jsfiddle.net/g7zz6/661/ Men: <input type="text" class="number men-value" value="1"><br> Women: <input type="text" class="number women-value" value="1"><br> Total Spend: <input type="text" class="number amount-value"...

    How to reduce the space between four buttons in bootstrap 3

    css,bootstrap
    i'm creating a simple menu at the top of my web page using bootstrap 3, with btn and btn-info classes in four divs (col-md-3). the space between the buttons is too high. how can i reduce the space between them ? for example 5 pixels margin. it's my code :...

    Push down footer when opening accordion

    jquery,html,css,accordion,jquery-accordion
    I have an accordion as my nav that I have fixed on the page but when opening the accordion it overlaps my footer, I have looked around and people are having the same problem but I can't seem to get any of the solutions to work with mine. .servicesub {...

    CSS flexbox wraps content in FireFox (not Chrome)

    css,google-chrome,firefox,flexbox,pseudo-element
    I have a button that consists of an <i> and an <span> element (an icon and some text). Now both have different sizes so I'm applying a flexbox to my button that should center my items nicely. In Chrome everything works as I expected but using the page in a...

    change css dynamically by selecting dropdown list item

    jquery,html,css,drop-down-menu
    I have the following Dropdownlist with yes or no options-:` <asp:DropDownList ID="ddlchangecss" runat="server"> <asp:ListItem Text="yes">yes</asp:ListItem> <asp:ListItem Text="no"></asp:ListItem> </asp:DropDownList> i want to add a css dynamically like that-: .imgFullWidth { width: 100%; height: auto; float: left; margin: 0px 0px 20px 0px; } when I select yes option in Dropdownlist. How can...

    How to change my table based on screen size?

    javascript,html,css,html5
    I want to change my table so it would look nice on a mobile platform. All I want to do is change my table so it is two columns. I am using this code to send an email. So I cannot link a stylesheet to my html. It is recommended...

    how to change other element css when selected element has new class

    jquery,html,css
    Is that possible to change other element css when element has selected. For example the code bellow have div.allgametap_wrapper , inside have div.allgame_tabitem,div.clear and div.tabtitle . What I mean is I have using js to switch the class selected inside div.allgame_tabitem , when div.allgame_tabitem has class selected the div.tabtitle inside...

    my svg polygons fills are not changing color on hover

    jquery,css,svg
    I have some svg polygons. When you mouse over a polygon, I want to find part of the polygon's id, then change the fill color of all polygons that have that part of the polygon id in their id. But it isn't working. No polygon fill is changing. Anyone know...

    CSS bouncing line loader animation

    html,css,animation
    Im trying to create a simple loader animation that draws a line back and forth but currently is moving only in one direction. As soon as it reaches the middle of the animation it does not animate in the oposite direction. This is my css @keyframes loader-animation { 0% {...

    list-type-style: none does not remove bullet points

    html,css
    I can't remove the bullet points from my nav ul li elements. HTML code <!DOCTYPE html> <html> <head> <title>Yu-Gi-Oh! Stash</title> <link rel="stylesheet" type="text/css" href="styles/style.css"> <meta charset="utf-8"> </head> <body> <section> <nav> <ul> <li><a href="#decks">Decks &blacktriangledown;</a></li> <li><a href="#booster-packs">Booster Packs &blacktriangledown;</a></li> <li><a...

    bootstrap - dynamically changing jumbotron background image

    javascript,jquery,html,css,bootstrap
    I'm trying to change the background image of the jumbotron div with jQuery when a new tab is clicked, like this: $(".about").click(function(){ $('.active').toggleClass('active'); $('.about').toggleClass('active'); $('.jumbotron').fadeOut(500); //change background image $('.jumbotron').fadeIn(500); }); I tried using $('.jumbotron').css('background-image',url('/path/to/new/image')); but when I include that line, the jumbotron background image doesn't display at all even before...

    Retain CSS :hover when changing CSS styles with Javascript

    javascript,html,css,hover
    I have a div (acting as a button) which has certain CSS that activates when hovered on: #btn{ width: 80%; height: 125px; border: 1px solid #9676E8; border-radius: 10px; transition: background-color 0.25s ease; background-color: #B299F2; color: white; } #btn:hover{ background-color: #9676E8; } Note: #9676E8 is a darker shade of #B299F2, both...

    Text-decoration/CSS causing text to move

    html,css,wordpress
    I've tried a bunch of techniques to solve this. I've used float (left/right) and played with positioning (absolute & relative). None worked. Basically my navigation keeps moving when the the text decoration (font-weight: bold; in this case) is applied. I'm new to CSS and this is my first header- so...

    How to fit the title to the entire page

    html,css,twitter-bootstrap
    I'm trying to fit this title to the entire page. For some reason, there is a padding around the text that's not allowing me to fit it. I set the padding of the column (Bootstrap) to 0, but that doesn't seem to help. As soon as I increase the font-size...

    evenly distribute a search form on navbar

    html,css,bootstrap
    I need to organize a search form horizontally so I tried to put them into a nav bar but code below is not working. I tried to use tables, col-sm-3, , but none of them is working. I would like 4 columns in a row. Can you please help? <div...

    Animate removal of list items with css

    css,angularjs,css3,animation,css-animations
    I have made the animation of a showing/hiding a list of messages. See this plunk. But how can I adapt it to also make an animation when a message is removed from the list? My css: .messages-active.messages { max-height: 50px; } .messages { -webkit-transition: max-height 1s; -moz-transition: max-height 1s; -ms-transition:...

    CSS :hover that shows more than one image

    html,css,css3
    I have an icon on my website. I want to change the icon to 4 different images when ever I hover over the first one. So I know how to switch between the regilar image to yellow0.png, but how do I continue to the next one (after half a second...

    Pure Css transition slide down panel not working

    html,css,css3
    Im trying to make slideDown Menu on hover.So on hovering HButton3 i want to extend the height of AccomodationPanel so that the buttons inside it display becasue the extend but nothing happens on hover it looks like its something in the position of the elements HTML : <asp:Panel runat="server" ID="Header"...

    Div is 100%width, but the browser still scrolls to the right

    html,css
    I am using October CMS for a project, but unfortunatley I am having problems. For one of my divs I have the background set to 100% width, however I am getting this problem where the div below it is smaller in width and the browser is scrolling to the right...

    Detect when the jQuery UI slider is being moved?

    jquery,html,css,jquery-ui
    I have this custom video time UI slider to change the time of the YouTube video when scrubbed. My problem is that when the video is trying to load when the user is moving the slider, it causes the handle to jerk around and flip around. What I'm trying to...

    CSS: How to flow text around both left and right images

    css,css3
    I know float:left will allow text to flow around an image floated on the left. And float:right will allow text to flow around an image floated on the right. Is there a way to flow text around both a left and right image? ...

    div wont fill 100% width on mobile Chrome/Safari Browser

    html,css
    I'm trying to make a simple website where the header is stretching 100% wide of the browser, then have the content below the header to be 1100px wide centered. This is working perfectly fine on desktop browsers (Chrome, Safari, Firefox). On mobile however there is issues. I haven't done any...

    Django: html without CSS and the right text

    python,html,css,django,url
    First of all, this website that I'm trying to build is my first, so take it easy. Thanks. Anyway, I have my home page, home.html, that extends from base.html, and joke.html, that also extends base.html. The home page works just fine, but not the joke page. Here are some parts...

    unable to apply toggleclass for bg after js script execution

    javascript,jquery,html,css
    i have this button on a page ... <div id="bgtoggle"> </div> i also have this script on the index page <script> $(document).ready(function(){ $("#bgtoggle").click(function () { $(".metro").toggleClass("bgcolorchange"); }); });</script> the class bgcolorchange has this css .bgcolorchange { background-image: url("../images/mthc/music-therapy-imageN.jpg"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; overflow : hidden ;...

    Add CSS3 transitions to jQuery Animate script

    javascript,jquery,html,css,css3
    Below I have a script that loads images in a random order and flies them onto the screen beside each other. You can find the script here: https://jsfiddle.net/38e126f4/ I would now like to be able to add different random CSS3 transition effects to each image as they fly onto the...

    How to track .animate left position

    javascript,jquery,html,css
    Hi I have this JQuery which will move a div left and right when hovered on the left and right buttons, however I need it to stop when the image position is at 0px; My current code - https://jsfiddle.net/38da9pca/2/ $(function() { $('#right').on('mouseenter', rscroll); $('#left').on('mouseenter', lscroll); $('#right, #left').on('mouseleave', function() { $('#bg').stop();...

    Swap nav and div vertically uing CSS only

    html,css,html5,css3
    So I have a <nav> in my <header> tag and just below it I have a <div> which shows the date. Now the problem is, my design is in such a way that I cannot put the <div> for the date inside my <header>. However since I'm working with a...

    HTML CSS Two 2-column tables side by side with same height and width

    html,css
    I'm quering a MySQL database and use a script to put results into an automatically generated HTML-file. I have two tables with 2 columns and 4 rows each that need to be put side-by-side. I have put my html & css in fiddle. http://jsfiddle.net/mika6891/7b0k049r/1/ My HTML code: <!-- gene description...

    How to position “:before” element used as icon in zurb foundation's Side nav?

    html,css,zurb-foundation
    I added a sub-menu to foundation's side nav exactly like in this example, but the icon is above the text. My CSS: .hasChildren:before{ content: "\25ba"; float: left } .hasChildren.active:before{ content: "\25bc"; } My HTML: <div class="large-4 medium-4 columns menu-wrapper"> <div class="panel"> <h4>Menu</h4> <ul class="side-nav"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li>...

    How to remove all the borders of a selectbox?

    jquery,html,css,drop-down-menu
    How can I remove the all the borders of the selectbox using css or Jquery ? My code, <select id="doctor_ch"> <option value="1" selected>One</option> <option value="2">Two</option> </select> CSS #doctor_ch{ background-color: #88AFF2; color:#fff; margin-top: 15px; } When I use this code it only changes the arrow style. I want to remove the...

    Weird behavior in Firefox using :after and float:right inside of a yui-purecss button

    css,yui-pure-css
    JsFiddle: http://jsfiddle.net/9opb4n03/1/ HTML: <html lang="en"> <head> <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css"> <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css"> </head> <body > <a class="pure-button" href="#"><span>BUTTON</span></a><a class="pure-button" href="#">Button Text</a><a class="pure-button" href="#">Another Button</a> </body> </html>...

    How can I keep a group of buttons centralized on the right side of the footer?

    html,css,button,footer
    I've been trying to keep four buttons centralized on the right side of the footer, but it seems like the footer is set to percentage instead of pixels, I've tried to set it to percentage, but it ignores my "orders", how can I set the footer to 60px, and put...

    Need to apply an alpha gradient to both sides of an image

    jquery,css
    I'm trying to blend out an image using jQuery or CSS (or both, of course.) Given the below HTML, is there any way to do this? I've found a few options but they seem to require a fixed width, which I won't have as these images are dynamically driven. <div...

    Adding horizontal space between 2 buttons using javascript

    javascript,jquery,html,css
    I am dynamically creating submit buttons using javascript. I wanted to know how to introduce horizontal spacing between every other button in the process. My code is var allFields = commonButtons.concat(extraFields); for (var i = 0; i < allFields.length; i++) { var node = document.createElement("input"); var btName = document.getElementById("submit-buttons"); node.setAttribute('data-value',...

    jquery mobile all the data attribute references does not work

    jquery,html,css,cordova,jquery-mobile
    In my header i included <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.css"> <script type="text/javascript" src="js/jquery-1.11.2.js"></script> <script type="text/javascript" src="js/jquery.mobile-1.4.5.js"></script> and whenever I use for example data-role="page" the expected effect does not acquire. why would that happen? edit: https://jsfiddle.net/f0eurafv/1/ notice the text input in the login form...

    Website showing differently in windows xp and mobile

    html,css
    I made a website for one of my clients, and I change the background and font color. Now on windows xp and smartphones the background changed color to the default color and the fonts remained the same. The website is simfest.ro I don't know what to do to make it...

    Fancybox thumbnail is not working

    javascript,jquery,html,css,fancybox
    I'm trying to imitate this jsfiddle: http://jsfiddle.net/kevin11189/uZCC6/1269/ however the thumbnails are not appearing. Here's my code: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Gallery</title> <meta name="description" content="An interactive getting started guide for Brackets."> <link rel="stylesheet" href=""> <style> .hidden { display: none; } </style> <!-- Add jQuery library -->...

    Div Text's Color Changes when Printed

    html,css,css3,media-queries,media
    I have a div with white text color. Using css media queries. @media print { .myid_print_duo_name { z-index: 2; position: absolute; left: 0px; top: 330px; width: 303px; height: 28px; line-height: 28px; text-align: center; color: white !important; font-weight: bold; font-size: 20px; font-family: "Times New Roman"; } } My text looks like...

    CSS disable horizontaly scrolling - Wordpress [on hold]

    php,html,css,wordpress,responsive-design
    Hi im working on a wordpress blog and have the following problem: http://www.catlovers.co/17-cat-reactions-that-sum-up-your-love-life/ If i resize the browser (X-Axies) to a minimum like surfing on a mobile device i am able to scroll to the right in the Contend section (hold down middle mouse button). How can i change my...

    how to set different font sizes in the same html header?

    html,css,fonts,font-size
    I want to create an html header as follows "Version1: (10.3.4) vs Version2: (10.3.4)" and I want the version number be smaller than the words "Version1" and "Version2" how can I do this?...

    Jquery Hide show toggle on DIVs

    javascript,jquery,html,css,website
    Hi Apparently my toggle function does not work. I need to Hide a div "photography" when clicking the word "photography" that is located in another div. Please see my code below <--html--> <div class="bar"> <div="container"> <div class="row"> <div class="col-lg-10 col-lg-offset-1 text-center"> <a href="#" id="hideshow" class="btn">Photography</a> <a href="#" id="hideshow" class="btn">Graphics</a> </div>...

    Centering navbar pills vertically within the navbar using flexbox

    html,css,twitter-bootstrap,flexbox
    I am terrible at CSS so I am having trouble centering my <li> (navbar pills) vertically for my navbar. This navbar is from twitter bootstrap Here is the HTML for my navbar: <div class="container"> <nav class="navbar navbar-default navbar-fixed-top"> <ul id="nav_pills" class="nav nav-pills" role="tablist"> <li role="presentation"> <a href="/">About</a> </li> <li role="presentation">...

    Default scrollbar position

    javascript,jquery,html,css,scroll
    I'm building a chat application in which I need the scrollbar to be at the bottom of the chat window (last message) on page load. How do I accomplish this (Using jQuery or otherwise)? Here's the chat window div: <div id="ccwindow"> <div class="bubble me">Hey!</div> <div class="bubble you">Hello</div> <div class="bubble me">I...

    Why does vertical-align: middle causes other elements to misalign?

    html,css,vertical-alignment
    With this code: .header { background-color: #444; height: 56px; color: white; } a { padding: 20px; } input { background-color: #444; border: 0; line-height: 24px; margin-left: 10px; color: white; height: 56px; padding: 0; font-size: 20px; vertical-align: middle; } <div class="header"> <a href="#"> <img src="http://directoryapp.trimian.com/img/directory/ic_search_white.png" /> </a> <input placeholder="Search" /> </div>...

    How to prevent bootstrap from making font bold?

    javascript,jquery,html,css,twitter-bootstrap
    Without including the bootstrap link in this simple example, the following code performs as expected: Hovering over any word turns the word red, and hovering away returns it to black. With the bootstrap link included, the change from red/black still works fine, but for some reason, the font becomes bold...

    What's happened to my

    alignments?

    css
    I would like my ((#banner_citrus_web_design p {)) <p> alignments in the center but it has a weird indent for some reason. Check my code and see what's happening please? The weird indent is happening to my paragraph element and really want the paragraph element to sit smack back in the...

    CSS - Linear Gradient Background Color no-repeat is not working for if it has multiple tds

    html,css,css3
    I want to apply css3 gradient (left and right transparent) background color for a TR element like below. Below code is working fine if it has only one TD element, where as more than one td, background gradient started repeating for each td... Am I missing something? Online Demo CSS...

    Body text goes over the top of fixed nav bar

    html,css
    I have a fixed nav bar, that follows when scrolling. But upon scrolling over text/images within tags it seems to go in front of the navbar, rather then behind. Why is this? How can I fix it? http://jsfiddle.net/6ekd1q46/2/ nav { background-color: #262626; height: 60px; width: 100%; position: fixed; top: 0;...