Animate removal of list items with css
css,angularjs,css3,animation,css-animations
The idea is to set the height of container and add transition to the height. $scope.styles.height = $scope.messages.length * 20 + 'px'; http://plnkr.co/edit/3dnGeVoQ1DbX55WQtJjk?p=preview...
Website showing differently in windows xp and mobile
The background colour changes when the browser width is less than 1200px wide. You have specified the background-color for the selector .td-grid-wrap within a media query: What you need to do is move the background-color property to the non-media-queried selector .td-grid-wrap or perhaps .td-page-wrap. ...
Scroll multiple divs vertically
$(function() { $('ul.nav a').bind('click', function(event) { var $anchor = $(this); $('html, body').stop().animate({ scrollTop: $($anchor.attr('href')).offset().top }, 1500, 'easeInOutExpo'); /* if you don't want to use the easing effects: $('html, body').stop().animate({ scrollTop: $($anchor.attr('href')).offset().top }, 1000); */ event.preventDefault(); }); }); * { margin: 0; padding: 0; } body { background: #000; font-family:...
How to remove all the borders of a selectbox?
jquery,html,css,drop-down-menu
Firefox has some problems with select-background. You can try this code - it'll remove the arrow, and then you can add a background image with your arrow (I took an icon from google search, just put you icon instead) I get this on FireFox (You can use any arrow icon...
tag in HAML
HAML equivalent is %i{class:"fa fa-search"} You can look at http://codepen.io/anon/pen/BNwbEP and see the compiled view ...
How to code a 5-state toggle link
You shouldn't remove the elements just use hide() because you'll need them later for showing again. For a 5-state button you need an indicator to know what the links current state is. You can do this by using a variable or an aria-attribute. Sample using aria $(function() { $(".toggle").click(function() {...
Can I uniquely identify 2 check boxes so that I can add a different image to each?
Here is an example of what I meant: (Oh and, forgive the images please :) ) #field1,#field2{ display:none; } #field1 + label { padding:40px; padding-left:100px; background:url(http://www.clker.com/cliparts/M/F/B/9/z/O/nxt-checkbox-unchecked-md.png) no-repeat left center; background-size: 80px 80px; } #field1:checked + label { background:url(http://www.clker.com/cliparts/B/2/v/i/n/T/tick-check-box-md.png) no-repeat left center; background-size: 80px 80px; } #field2 + label { padding:40px;...
How to fit the title to the entire page
You just need to remove margin-left: -29px; from #titlebig. For example: body { background-color: black; margin: 0px; padding: 0px; } div { margin: 0px; padding: 0px; } .header { color: white; font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial"; } .box { background-color: aqua;...
Retain CSS :hover when changing CSS styles with Javascript
This is because the inline rule set by JS overrides any CSS rules (unless they have the !important declaration). Instead of setting the color back to the same value, set it to empty to reset it: else { toggle = false; btn.style.border = ""; btn.style.backgroundColor = ""; } ...
How do I put my index.html in the same folder as my other .html files on github?
You can achieve this with a simple JS call <script type='text/javascript'> window.location.href = 'path/to/your/page.html'; </script> This can be the only content inside your new index.html but it is required to have an index page for the web client to recognize....
How can I make a list horizontally scrollable without items going to the second line?
.dates-bar{ width:auto; max-width:100% overflow-x: atuo; } .dates-bar ul{ white-space: nowrap; } The whitespace property is the missing ingredient....
Is There Dreamweaver Spry Alternatives? [on hold]
jQuery plugin makes simple clientside form validation www.jqueryvalidation.org
Add CSS3 transitions to jQuery Animate script
javascript,jquery,html,css,css3
You mean do the entire animation in css3? var av_icons = ["http://img3.wikia.nocookie.net/__cb20111227211832/cjpedia/images/c/c5/503px-Luigiart6.png", "http://files.softicons.com/download/game-icons/super-mario-icons-by-sandro-pereira/ico/Mushroom%20-%201UP.ico", "http://icons.iconarchive.com/icons/yellowicon/game-stars/256/Mario-icon.png", "http://img3.wikia.nocookie.net/__cb20111227211832/cjpedia/images/c/c5/503px-Luigiart6.png", "http://icons.iconarchive.com/icons/yellowicon/game-stars/256/Mario-icon.png",...
add value to existing class in jQuery
Use attr() like $(document).ready(function() { $('.project-open').hide(); $('.hackandfly, .scanergy, .connecting-food').click(function() { $slidah = $($(this).attr('class')+'-open'); $slidah.slideToggle(); $('div.project-open').not($slidah).slideUp(); }); }); However, the above will fail if you have multiple classes. A workaround would be to add data-* to the clicked elements like <div class="hackandfly other-class" data-class-target="hackandfly-open"></div> and then $(document).ready(function() { $('.project-open').hide();...
CSS drop down navigation
css,html5,css3,drop-down-menu,navigation
You have to add a position:absolute to the selector .navigation li ul .navigation{ margin-right: auto; margin-left: auto; width: 100%; background-color: #0f9cde; position: absolute; display: block; margin-bottom: 15px; z-index: 1000; margin-left: -15px; } /*Strip the ul of padding and list styling*/ .navigation ul{ list-style-type: none; margin: 0 auto; padding: 0; position:...
How to reduce the space between four buttons in bootstrap 3
A tip for the future, bootply.com is better for mocking up Bootstrap issues since it has the Bootstrap framework included by default. Here is how I would set it up: <div class="container"> <div class="row"> <div class="col-xs-12"> <button class="btn btn-info"> پشتیبانی </button> <button class="btn btn-info"> آموزش نصب آی او اس ۹...
HTML CSS Two 2-column tables side by side with same height and width
Okay so I have made a few assumptions to create this solution. Firstly, I'm guessing that as you are setting the headers of the tables as width:200px; that the width of the two columns are 100px. (This can be changed if need be). Secondly, these tables are not floated. This...
Top header 100% of screen, but body only 70%?
Put your header inside the body. And don't apply styles to the body but use a container. + You should have one single header in your page. <body> <header> <nav><ul> <li class="active"><a href="#">Home</a></li> <li><a href="#">Solutions & Services</a> <ul> <li><a href="#">Internet</a></li> <li><a href="#">Networking</a></li> <li><a href="#">Website</a></li> <li><a href="#">Home...
Text-decoration/CSS causing text to move
This is normal behaviour: Bold text is wider, thus repositioning the centered text around it. You could go for a fixed width on all links to prevent this: .main-navigation a { text-decoration: none; min-width: 6em; display: inline-block; } ...
CSS disable horizontaly scrolling - Wordpress [on hold]
php,html,css,wordpress,responsive-design
Try This: in your css @media only screen and (max-width: 479px){ .post-container{overflow: hidden;} } ...
Fancybox thumbnail is not working
javascript,jquery,html,css,fancybox
You need to add absolute URL paths in external resources option, not relative. See the Console errors in Firebug. Example: http://fancyapps.com/fancybox/source/jquery.fancybox.js instead of just jquery.fancybox.js Check this: JSFiddle, I forked your JSfiddle and edited the external sources. ...
fit items to container's width
Just give a percentage to the right margin. The divs total width is 16% x 5 = 80% of the total width. So, the remaining width is 20%. Divide that by 5 (total div margins) and set to 4%: margin-right:4%; Check the DEMO And also, you don't need jquery here...
Default scrollbar position
javascript,jquery,html,css,scroll
Here you go: http://jsfiddle.net/vtep7Lf1/ $("document").ready(function() { $("#ccwindow").animate({ scrollTop: $("#ccwindow").height() }, "slow"); return false; }); ...
Div is 100%width, but the browser still scrolls to the right
Set body to be max-width: 100%; and overflow-x: hidden; so it doesn't allow user to scroll to the sides. result: body { max-width: 100%; overflow-x: hidden; .. } ...
What is the best way to make your text stay in the same line as your icons?
You need to set display: inline-block for squares divs: #cb-key-danger{ width: 15px; height: 15px; background-color: #F46E4E; display: inline-block; } #cb-key-warning{ width: 15px; height: 15px; background-color: #F9C262; display: inline-block; } #cb-key-success{ width: 15px; height: 15px; background-color: #ADB55E; display: inline-block; } .cb-key-row{ background-color: #E2E2E2 ; font-size: 10px; } .cb-key-row span { display:...
Divs placed relative to image on window resize (almost works)
.pin is currently set to position: relative; this means top and left will offset the pin from where it painted on the page. To place them relatively to #outerdiv you need to make them position: absolute;. In your original version #pin1 works because it is output at the top left...
show div only when printing
You need some css for that #printOnly { display : none; } @media print { #printOnly { display : block; } } ...
1px white spacing in Chrome between div's
Pixel rounding. If your width generated is 1000px, each column should be generated at 333.33̅px. However, each browser/version handles decimal pixels differently unfortunately. Here's a handy guide: http://cruft.io/posts/percentage-calculations-in-ie/ Shock horror that IE is the worst. If you run it in IE, make sure your window is 1001px wide and see...
how to set different font sizes in the same html header?
This is what you need. No special coding required. +1 if it helps. <h1>Version1: <small>(10.3.4)</small> vs Version2: <small>(10.3.4)</small></h1> ...
Load resources via CDN or minifiy/concat and serve yourself? [on hold]
javascript,css,minify,bundling-and-minification
Interesting question. I'd say it depends. Using a CDN can be slower than using your own server. This is primarily because the CDN resides on another domain, hence it would result in an additional DNS round trip. Ultimately, this may cause it to become even slower than if you had...
bootstrap - dynamically changing jumbotron background image
javascript,jquery,html,css,bootstrap
You have some syntax errors otherwise everything is good!! keep url inside quotes as below: $('.jumbotron').css('background-image','url(/path/to/new/image)'); ...
Changing font-size of on wordpress
I think you have style inheritance from upper element, check it with dev. tools in browser. You can also try to set inline style for: <li style: "font-size: 22px;">Name 1</li> or add !important in your css file, like this: td > ul li { font-size: 22px !important;"> } ...
Aligning two elements in a container using css?
Did you add float: right to your element? As you said, floating will make the parent element ignore the element height, which places the element outside the parent. Adding overflow: hidden; to the parent element, in this case the header class, will solve the problem. Updated JSFiddle: https://jsfiddle.net/AVY7T/231/ Placing both...
CSS: How to flow text around both left and right images
It's just as you said. You need to have one image with float:left and another with float:right. If both are placed before the text, they will each be at their respective top corners, horizontally aligned. <img src="http://placehold.it/100x200" style="float:left;"> <img src="http://placehold.it/100x200" style="float:right;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur...
Centering navbar pills vertically within the navbar using flexbox
html,css,twitter-bootstrap,flexbox
Set display: flex for the <ul class="nav">, not for items. Also use align-items: center for vertical aligment: .nav { height: 70px; display: flex; justify-content: center; align-items: center; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <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...
Detect when the jQuery UI slider is being moved?
You can use 3-Events: - Start (Start-Sliding) -> Stop Player - End (End-Sliding) -> Start Player - Slide (Sliding) -> Move Player-Position $("#range").slider({ range: "min", start: function(event, ui) { player.pauseVideo(); }, stop: function(event, ui) { player.playVideo(); }, slide: function(event, ui) { player.seekTo(ui.value,true); return false; } }); Demo: http://codepen.io/anon/pen/EjwMGV...
How to position div which contains font-awesome icons to centre of another div?
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css); body{background-color:black} #menuRightSideGame { position: absolute; top: 28%; right: 2%; } .rightSideMenuItem { width:70px; height:70px; background: #c3834c; z-index: 1990; background-size: 100%; position: relative; border-radius:50%; box-shadow:0 0 5px 5px white; margin:20px; text-align: center; /* vor horizontal align */ } .rightSideMenuItemIcon { color: #fff; line-height:70px; /* for vertical align, needs...
Adding horizontal space between 2 buttons using javascript
Use CSS instead of Javascript. Anyway, you're adding a class to all buttons. Use following code: .submitButton { margin: 0 10px; } ...
How to track .animate left position
You basically have to check whether the element is already touching its boundaries If it is, do nothing If not, check if the next change is will go past the boundaries If it will, only move by the remaining distance. If it wont, move by 25 pixels Also, you should...
How to make an element disappear by clicking off it
You're looking for the .blur() event I believe. http://jsfiddle.net/d7mbbmwe/ $('#input1').blur(function() { $('.results').html('') }); ...
in a table want to include sale price but it inserts into a new cell and not the same [on hold]
In your CSS you should have something like: .salePrice { display:inline-block; } .originalPrice{ display:inline-block; } If you are formatting it "as a table", it may desired to supply a width or some padding inside of the CSS of each DIV element, to give it an easier-to-read appearance to the user....
JQuery Animate() showing sticky behaviour with other elements in the same class
Try adding vertical-align: top to the .outer-card css class. This works because .outer-class is display:inline-block and the vertical-alignproperty applies to inline elements. Code Example...
change icon on collapse in Bootstrap 2.3 not in bootstrap 3
javascript,jquery,css,html5,twitter-bootstrap
Updated. Yes - the first pure CSS solution was not satisfactory. If you dare to add some javascript, you can do this : $('.accordion-group').on('show', function() { $(this).find('.accordion-toggle').removeClass('arrow-down').addClass('arrow-up'); }); $('.accordion-group').on('hide', function() { $(this).find('.accordion-toggle').removeClass('arrow-up').addClass('arrow-down'); }); It is using the bootstrap collapse hide / show events directly on the collapse sections. Still without...
How To Check Value Of String
document.GetElementById("tombolco").style = "display:block"; That's not the right way. This is document.getElementById("tombolco").style.display = 'block'; Also note that it is getElementById, not with a capital G. Same with 'none',Rest of your code is fine. Fiddle...
change the pop-up image width and height in fancybox [duplicate]
javascript,jquery,html,css,fancybox
Think it computes dynamically based on the screen size. However, you could try adjusting the .fancybox-image class. Also check the .fancybox-outer and .fancybox-inner classes. You might have to adjust them too.
drop down menu toggle does not work
You are missing the equals sign before the class name in your link tag: <li><a class"drop-menu" href="#" >Galleries</a> ^ /* Add equals sign: */ <li><a class="drop-menu" href="#" >Galleries</a> .. therefore the .drop-menu selector is not returning anything. You should consider storing your selections too: var main = function() { var...
How to reduce the size of picture on the background?
If you're trying to set fixed background image, this is example to scale and align your background image: .pic-wrap { display: block; height: 296px; background-image: url(https://pbs.twimg.com/profile_images/590966305248784384/1gX6-SY6_400x400.jpg); background-size: 256px; background-position: 20px 50%; background-repeat: no-repeat; padding-left: 296px; border: 1px solid #ddd; } @media only screen and (max-width: 320px) { .pic-wrap { background-size:...
Select n elements from hover event
Use the immediate sibling selector (+) .item:hover + .item, .item:hover + .item + .item { background-color: green; } Example: http://codepen.io/anon/pen/jPGoYw...
Render list starting from the bottom of its container
nav ul ul { display: none; } nav ul li:hover > ul { display: block; } nav ul { background: #efefef; background: linear-gradient(top, #efefef 0%, #bbbbbb 100%); background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); background: -webkit-linear-gradient(top, #efefef 0%, #bbbbbb 100%); box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15); padding: 0...
Button not center align in Safari
if you don't set a width for btn: parent - text-align: center use for button - display-inline: block; instead display: block .wrap { text-align: center; } .center-block { display: inline-block; } <div class="wrap"> <input value="Button" class="center-block" type="submit" /> </div> ...
How can I keep a group of buttons centralized on the right side of the footer?
I didn't actually test any of this, but in theory, these are possible solutions. So as not to mess up the CSS you have working on the set of buttons, Wrap the set of buttons in a div and apply one of these classes to the div. .footerButtonWrapper { margin:...
How do I specify a css margin-top for foundation row div?
Use: div.row { margin-top: 12px; } or .row { margin-top: 12px !important; } ...
Difficulty applying two different scripts
The problem comes from the difference in relative paths depending on where that path is specified. When specified in a CSS file, the path is relative to that file. When you assign a url() path to an element in JavaScript, it is relative to the page in which the script...
Div Text's Color Changes when Printed
html,css,css3,media-queries,media
MDN Docs: Adding this below rule will overwrite the user's printer property settings. @media print { .myid_print_duo_name { /* Replace class_name with * to target all elements */ -webkit-print-color-adjust: exact; print-color-adjust: exact; /* Non-Webkit Browsers */ } } ...
CSS :hover that shows more than one image
Okay so I have got a probable solution, the catch is, you won't be able to use img tags. You can use images as background-image and animate background on :hover NOTE: Fade in effect can be removed by playing with animation. HTML <div class="image-box"></div> CSS .image-box { height: 200px; width:...
list-type-style: none does not remove bullet points
not navn, but nav ul! nav ul { list-style-type: none !important; margin: 0; padding: 0; overflow: hidden; } ...
How to position “:before” element used as icon in zurb foundation's Side nav?
Use relative positioning, like this: .hasChildren:before{ content: "\25ba"; float: left; position: relative; top: 6px; } .hasChildren.active:before{ content: "\25bc"; } Updated fiddle: http://jsfiddle.net/vpoycbzb/1/...
change css dynamically by selecting dropdown list item
jquery,html,css,drop-down-menu
I have created a working example for you. You can find the jsfiddle in here This piece of code uses JQuery. (Remember, for these type of tasks, JQuery is your friend =] ). HTML <select id="dropDownMenu"> <option value="option1" selected="selected">yes</option> <option value="option2">no</option> </select> <br> <img id="picture" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/House_Sparrow_mar08.jpg/220px-House_Sparrow_mar08.jpg"> Javascript function changeStyle(){...
unable to apply toggleclass for bg after js script execution
Just got it working: see here. There were two problems here. The first one is that when you add the bgcolorchange class, its background-image wasn't being considered because the first class (metro) already had that property. So, I had to add the !important notation to it, thus being able to...
Weird behavior in Firefox using :after and float:right inside of a yui-purecss button
Remove float:right and add display:inline-block to .pure-button:after Fiddle: http://jsfiddle.net/9opb4n03/2/...
Google map infowindow position on custom marker
javascript,css,google-maps,google-maps-api-3
Set the pixelOffset of the InfoWindow appropriately: From the documentation on InfoWindows pixelOffset | Type:Size | The offset, in pixels, of the tip of the info window from the point on the map at whose geographical coordinates the info window is anchored. If an InfoWindow is opened with an anchor,...
Pure Css transition slide down panel not working
Height of #StayOpen is 0px. Also you have to check CSS rule priorities. Your code might look like this: #StayOpen { height: 100%; } #StayOpen:hover #AccomodationPanel { height:300px !important; } Look at this fiddle. Transition In your question you've mentioned about transition. You can add it in #AccomodationPanel (updated example):...
Bring div to front on fixed position
You need to add a z-index, this will put the divs into z space based on the z-index value, Example: <div id="a" style="z-index:10"></div> <div id="b" style="z-index:1"></div> Div a will be placed above Div b as it has a higher z-index. Here is a simple JSFiddle example - https://jsfiddle.net/ta2gbn4m/...
CSS mystery: why the extra height in my div's?
Adam Maybe you just remove the blank <p></p> that you really don't need it. remove that <p></p> after the <img/>. And your layout will be good. Take a look(which <p></p> you should remove it.)...
Block elements inside button element acts unexpected
The content of a button element are vertically aligned to the middle. When you only have .btn-loading-text, that element is 16px tall, and the button is 38px tall, so .btn-loading-text is aligned to the middle. However, when you also include .btn-loading-spinner, which is 38px tall (including borders and margins), the...
How to define style to layout-margin flex variants, using Angular Material
css,angularjs,angular-material
Angular material doesn't add or remove the attributes based on the browser size, so both [flex] and [flex-sm] will always be on your element. That is why they both apply, you will have to write a media query with the same break point as angular material if you want to...
Jquery Hide show toggle on DIVs
javascript,jquery,html,css,website
Looks like a spelling error: <section id="photograhpy" class="photograhpy"> Should be: <section id="photography" class="photography"> There is nothing else outstandingly wrong with your code. Also, you may not reference elements with the same id exclusively via JavaScript. It is poor practice to give multiple elements the same id....
jquery mobile all the data attribute references does not work
jquery,html,css,cordova,jquery-mobile
In reference to your fiddle-link (https://jsfiddle.net/f0eurafv/1/): The problem is that you have bound a click-function to your <h2>-tags in which you manually fadeIn/fadeOut your different pages. In this case jQuery-mobile will not do the work for you (switching to the other page) and as a side effect it will not...
Fit an image inside a div that also has a title?
One possibility that gives just one constant-pixel value (repeated once): .block h2 { height: 30px; } .block img { height: calc(100% - 30px); } ...
how to change other element css when selected element has new class
It would be great If you can provide the js code of yours. Here is the illustration : // $(this) would refer to current selected element // this depend on your existed js code if ( $(this).hasClass('selected') ) { $('.tabtitle').css('color','#666'); //<-- add this $(this).siblings('.tabtitle').css('color','#fff'); } ...
Exit Div Only On Click Of Background With Javascript(Jquery) [For Popup]
You can use 2 click handlers, the second one will prevent the propagation of click event from newcommentholder so that clicks inside that will not close the popup $("#newcommentcontainer, #exoutnewcommentholder").click(function (e) { $("#newcommentcontainer").hide(); }); $('#newcommentholder').click(function (e) { //stop propagation to newcommentcontainer element e.stopPropagation(); }) Another option you can try is(not...
fill an html table by column instead of row?
Updated fiddle accordingly but using JS. It should give you an idea. HTML <div id="dynamic"> </div> JS var priceList = [ 'price1', 'price2', 'price3']; var itemList = [ 'item1', 'item2', 'item3' ]; $('#dynamic').append('<table><caption>DYNAMIC</caption><tr>'); for (var i=0; i<3; i++){ $('#dynamic').append('<td>' + itemList[i] + '</td>'); } $('#dynamic').append('</tr><tr>'); for (var i=0; i<3; i++){...
Round edges on shorter side in CSS [duplicate]
Just use a huge number, e.g. border-radius: 9999999px; .horizontal { width: 175px; height: 50px; } .vertical { width: 50px; height: 175px; } .box { border-radius: 9999999px; display: inline-block; vertical-align: middle; margin: 0 10px; background: blue; } <div class="horizontal box"></div> <div class="vertical box"></div> It works because, according to the spec, Corner...
CSS on hover image blinking issue
Add to your css: pointer-events:none; in the .categorywrapper .views-row .term-desc Basically the result is: .categorywrapper .views-row .term-desc { pointer-events:none; position:relative; top:100px; left:20px; width:200px; } Additionally you use a negative z-index on your hover element which means it goes behind the parent elements and triggers the mouseout event which turns off...
How to set DIV's width based on CSS indexes
If I understand this correctly,all you need to do is change your CSS to the following: .sintesi-offerta > .block:nth-child(3n+1) { width: 40%; } .sintesi-offerta > .block:nth-child(3n+2) { width: 20%; } .sintesi-offerta > .block:nth-child(3n+3) { width: 40%; } Side note: your br tags should be <br/> for jsfiddle to interpret them...
Swap nav and div vertically uing CSS only
The suggested swap does work. You had some errors in your css. You need to remove the period "." before nav and #date in your css. .swapHack{ display:table; width: 100%; } #date { display: table-header-group; } nav { display: table-footer-group; } <div class="swapHack>" <header> <div id="logo"> <img src="images/logo.png" title="Site Name"...
div wont fill 100% width on mobile Chrome/Safari Browser
Your problem is in div.container. Its width is fixed at 1100px. In mobile device has resolution width smaller that number, browser must resize scale to show whole page and then your problem appear. If you add that line to header, you will see it clearly. <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" /> Solution...
Add Extension to Index File
Unfortunately this does not work. You can not pass URL Parameters into the file-name. If you want to add it as the page loads, you could add this to the JavaScript of the page: function setGetParameter(paramName, paramValue) { var url = window.location.href; if(!(url.indexOf(paramName) >= 0)) { if (url.indexOf(paramName + "=")...
my svg polygons fills are not changing color on hover
Change $('polygon[id^=thisRow]').attr('fill', '#ccc'); to $('polygon[id^=' + thisRow + ']').attr('fill', '#ccc'); Your current line searches for elements whose IDs begin with the string "thisRow". You need to search for IDs beginning with the value of the variable thisRow. Here's an example fiddle with only that line of JS changed (I slightly...
styles css in embeded souncloud player
css,iframe,styles,embed,soundcloud
CSS you are writing on your CSS file wont effect content of iFrame. Solutions: Do you really need an iFrame? Cant it be done using modal window or something like that? Add CSS you want to add using JS/JQuery $('iframe').load( function() { $('iframe').contents().find("head") .append($("<style type='text/css'> .my-class{display:none;} </style>")); }); ...
CSS flexbox wraps content in FireFox (not Chrome)
css,google-chrome,firefox,flexbox,pseudo-element
Weird. button elements have some special behavior which seems to conflict with flexbox. Specifically, what happens is that the flex items are blockified, according to the spec: The display value of a flex item is blockified: if the specified display of an in-flow child of an element generating a flex...
CSS - Linear Gradient Background Color no-repeat is not working for if it has multiple tds
table{border-collapse:collapse;width:100%} table tr td{padding:5px;border:1px solid #000; background:#FFF } table tr:hover td{padding:5px;border:1px solid #000; background:transparent } table{ background:...
Div with the form of a pencil [duplicate]
.pencil{ width: 200px; height: 40px; border: 1px solid #000; position: relative; } .pencil:before{ content: ''; display: block; margin: 10px 0; width: 100%; height: 10px; border: 6px solid #000; border-width: 6px 0; } .pencil:after{ content: ''; display: block; height: 10px; border: 1px solid #000; border-width: 1px 1px 0 0; width:...
Why does vertical-align: middle causes other elements to misalign?
Applying vertical-align to one element doesn't cause miss-alignment for another element. If you don't apply the vertical-align then both element (in your example) would be aligned same by the browser. Suppose if browser default is vertical-align: top; then both element is aligned to top. So, you see no miss-alignment between...
Change result based on selection dropdown Option
please check this JSFiddle i updated the code: https://jsfiddle.net/g7zz6/664/ hope it helps :) HTML: 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" placeholder="Amount" name="amount"> <select id="option"> <option value="perPerson">per person</option> <option value="groupTotal">group total</option> </select> <div...
Need to apply an alpha gradient to both sides of an image
Here is one solution that uses alpha gradients, not white gradient. The idea is to mask a gradient with an image. Tested with Chrome 43 on Win. Other browers might require SVG fallbacks. caniuse css-masks? header { font-size: 2em; position: relative; top: 2em; background-color: red; } img { width: 100%;...
How to change my table based on screen size?
No, definitely don't use Javascript for email sending, as most clients fully disable it. You wouldn't need Javascript at all even if you were designing your table for web browsers only. All your problems can be solved with well applied media queries, if you wanna spend a little time doing...
How do you make a div only extend in one direction when the outer container size increases?
javascript,html,css,css3,layout
You can try the following: Full screen example jsFiddle HTML: (Took leftCol out of container) <div id="page"> <div id="leftCol"> LEFT </div> <div id="container"> <div id="rightCol"> RIGHT </div> </div> </div> JS: (Update the width on page resize and on load) $(window).on('resize', function(){ var containerWidth = 980; var pageWidth = $(window).width(); var...
mobile friendly CSS multi column layout that doesn't suck like flex
You can have more control of your content by placing your content in three divs and then use CSS to define the width and margins of your divs (columns). For Example this could be your CSS: .oneThird { float: left; margin-right: 2%; width: 32%; } .gridLast { margin-right: 0; }...
Dynamically resize side-by-side images with different dimensions to the same height
If it's responsive, use percentage heights and widths: html { height: 100%; width: 100%; } body { height: 100%; width: 100%; margin: 0; padding: 0; } div.container { width: 100%; height: 100%; white-space: nowrap; } div.container img { max-height: 100%; } <div class="container"> <img src="http://i.imgur.com/g0XwGQp.jpg" /> <img src="http://i.imgur.com/sFNj4bs.jpg" /> </div>...
CSS bouncing line loader animation
It is because you have a heavy break between 49% and 50%. 49% { width: 100%; } 50% { left: 100%; } Adding the left to the 49%, and adjusting a few properties of width, left, etc. gives you an awesome pulsating effect: @keyframes loader-animation { 0% { width: 0%;...
How to make background body overlay when use twitter-bootstrap popover?
Posting some more code would be nice. This should work. Use some jQuery or AngularJs or any other framework to make the .overlay initially hidden, then to make it visible when needed. If you need help, comment. If it helps, +1. EDIT $(function() { $('[data-toggle="popover"]').popover({ placement: 'bottom' }); $("#buttonright").click(function() {...
How to prevent bootstrap from making font bold?
javascript,jquery,html,css,twitter-bootstrap
The original black color which bootstrap was using was #333. You change it to #000 which makes it appear bolder. Try this $(document).ready (function () { $('.ztag') .hover ( function () { $(this).css({color: '#ff0000'}) }, function () { $(this).css({color: '#333333'}) } ) }) ...
table{border-collapse:collapse;width:100%} table tr td{padding:5px;border:1px solid #000; background:#FFF } table tr:hover td{padding:5px;border:1px solid #000; background:transparent } table{ background:...
Div with the form of a pencil [duplicate]
.pencil{ width: 200px; height: 40px; border: 1px solid #000; position: relative; } .pencil:before{ content: ''; display: block; margin: 10px 0; width: 100%; height: 10px; border: 6px solid #000; border-width: 6px 0; } .pencil:after{ content: ''; display: block; height: 10px; border: 1px solid #000; border-width: 1px 1px 0 0; width:...
Why does vertical-align: middle causes other elements to misalign?
Applying vertical-align to one element doesn't cause miss-alignment for another element. If you don't apply the vertical-align then both element (in your example) would be aligned same by the browser. Suppose if browser default is vertical-align: top; then both element is aligned to top. So, you see no miss-alignment between...
Change result based on selection dropdown Option
please check this JSFiddle i updated the code: https://jsfiddle.net/g7zz6/664/ hope it helps :) HTML: 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" placeholder="Amount" name="amount"> <select id="option"> <option value="perPerson">per person</option> <option value="groupTotal">group total</option> </select> <div...
Need to apply an alpha gradient to both sides of an image
Here is one solution that uses alpha gradients, not white gradient. The idea is to mask a gradient with an image. Tested with Chrome 43 on Win. Other browers might require SVG fallbacks. caniuse css-masks? header { font-size: 2em; position: relative; top: 2em; background-color: red; } img { width: 100%;...
How to change my table based on screen size?
No, definitely don't use Javascript for email sending, as most clients fully disable it. You wouldn't need Javascript at all even if you were designing your table for web browsers only. All your problems can be solved with well applied media queries, if you wanna spend a little time doing...
How do you make a div only extend in one direction when the outer container size increases?
javascript,html,css,css3,layout
You can try the following: Full screen example jsFiddle HTML: (Took leftCol out of container) <div id="page"> <div id="leftCol"> LEFT </div> <div id="container"> <div id="rightCol"> RIGHT </div> </div> </div> JS: (Update the width on page resize and on load) $(window).on('resize', function(){ var containerWidth = 980; var pageWidth = $(window).width(); var...
mobile friendly CSS multi column layout that doesn't suck like flex
You can have more control of your content by placing your content in three divs and then use CSS to define the width and margins of your divs (columns). For Example this could be your CSS: .oneThird { float: left; margin-right: 2%; width: 32%; } .gridLast { margin-right: 0; }...
Dynamically resize side-by-side images with different dimensions to the same height
If it's responsive, use percentage heights and widths: html { height: 100%; width: 100%; } body { height: 100%; width: 100%; margin: 0; padding: 0; } div.container { width: 100%; height: 100%; white-space: nowrap; } div.container img { max-height: 100%; } <div class="container"> <img src="http://i.imgur.com/g0XwGQp.jpg" /> <img src="http://i.imgur.com/sFNj4bs.jpg" /> </div>...
CSS bouncing line loader animation
It is because you have a heavy break between 49% and 50%. 49% { width: 100%; } 50% { left: 100%; } Adding the left to the 49%, and adjusting a few properties of width, left, etc. gives you an awesome pulsating effect: @keyframes loader-animation { 0% { width: 0%;...
How to make background body overlay when use twitter-bootstrap popover?
Posting some more code would be nice. This should work. Use some jQuery or AngularJs or any other framework to make the .overlay initially hidden, then to make it visible when needed. If you need help, comment. If it helps, +1. EDIT $(function() { $('[data-toggle="popover"]').popover({ placement: 'bottom' }); $("#buttonright").click(function() {...
How to prevent bootstrap from making font bold?
javascript,jquery,html,css,twitter-bootstrap
The original black color which bootstrap was using was #333. You change it to #000 which makes it appear bolder. Try this $(document).ready (function () { $('.ztag') .hover ( function () { $(this).css({color: '#ff0000'}) }, function () { $(this).css({color: '#333333'}) } ) }) ...