I'm attempting to add elements to a div container however the elements ignore their css class.
JavaScript
$.each(jobs, function(i, job)
{
var option = '<div class="input"><div class="option">' + job.created +'</div></div>';
$('.options').append(option);
});
Html
<div class="options" style="overflow: scroll; width: 100%; height: 80%; background-color: White; text-align: left;">
<div class="input">
<div class="option">
Hunt Osama.
</div>
</div>
<div class="input">
<div class="option">
Execute without trial.
</div>
</div>
</div>
The elements are successfully appended to the div however the styling information is not acted upon.
EDIT: the classes input and option have no effect on the added elements.
Any hints?
I have tested your code on my machine and it works fine in IE & Firefox if I apply CSS to the children.
In my css file I have added the following declaration:
.option
{
font-weight:bold !important;
color: red;
}
This issue ended up being specific to WebKit/Qt on the windows mobile platform. It doesn't appear during a Android/WebKit example.
Sorry I have no further details on the cause of the problem.
Thanks for all the help.
Related
I simply have some html code that works fine but when I add the jQuery UI library, it also adds its own classes to my original element classes.
However, this is not a problem but it also parents some elements meaning that it adds a div parent to those (some) elements.
This prevents the css rules of those elements from taking effect and also requires to rewrite the entire code to include the added jquery classes and parent element tags.
Am using absolute css target paths to style these elements like so...
div#searchAPI>div.a>input{
font-size:18px !important;
color: #585858;
padding:0 60px 0 50px;
border:0 !important;
outline: none !important;
text-decoration: none;
background: red;
}
And the target element would be....
<div id="searchAPI">
<div class="a">
<input type="text">
</div>
</div>
But when the jQuery UI lib is added, it adds it own custom parent to the input tag element like...
<div id="searchAPI">
<div class="a">
<div class="ui-textinput ui-corner-all ui-shadow-inset ui-textinput-text ui-body-inherit">
<input type="text">
</div>
</div>
</div>
Any sugguestions to how I can get rid of the extra parenting effect are greatly appreciated, thanks...
I have a group of LinkedIn share buttons (supplied via LinkedIn) throughout my blog pages, that I am trying to align horizontally inline with other share buttons. I have tried most everything so far, and have decided to - ineffectively - try attribute selectors to make the buttons do what I want. Here is the button code:
<script src="//platform.linkedin.com/in.js" type="text/javascript">
<span class="IN-widget" style="line-height: 1; vertical-align: baseline; display: inline-block; text-align: center;">
And the attempted CSS:
span[class="IN-widget"] { display: inline-block; }
Can anyone tell me if I'm misstepping here? To my knowledge, every share button has this common class as part of its source code, so this should do the trick in introducing the desired styling. Any help would be much appreciated!
Edit
Second Edit: .IN-widget is dynamically generated and doesn't exist in markup. So use 'script[type^=IN]' as your selector see edited code below
Having one per page and using the id would be inefficient, so we need to use JavaScript/jQuery instead of CSS. One major limitation of CSS is it's inability to control a selected element's parent and ancestors.
Details are commented in demo
Demo
/* The selector means:
|| Find a <script> tag that has a [type] attribute
|| that's value begins ^= with the string of "IN"
*/
/* The .closest() method will find the ancestor closest
|| to the targeted selector. So here it's saying:
|| (Previous comment here)
|| Find the closest ancestor of the selected element
|| which has the classes .sqs-block, .code-block,
|| and .sqs-block-code.(grandma)
|| Use .css() method to change grandma's styles.
|| The extra style top:3px is just to push the icon down
|| down so that it is inline with FB and Twit icons.
*/
$('script[type^=IN]').closest('.sqs-block.code-block.sqs-block-code').css({
'display': 'inline-block',
'top': '3px'
});
$('.fb-share-button').closest('.sqs-block.code-block.sqs-block-code').css('display', 'inline-block');
$('.twitter-share-button').closest('.sqs-block.code-block.sqs-block-code').css('display', 'inline-block');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sqs-block code-block sqs-block-code">
<div class="sqs-block-content">
<div class="fb-share-button fb_iframe_widget"><span style="vertical-align: bottom; width: 58px; height: 20px;"><iframe width="1000px" height="1000px" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" src="https://www.facebook.com/v2.8/plugins/share_button.php?app_id=&channel=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2F0F7S7QWJ0Ac.js%3Fversion%3D42%23cb%3Df836e17d67a66%26domain%3Dtylercharboneauprofessional.com%26origin%3Dhttps%253A%252F%252Ftylercharboneauprofessional.com%252Ff23efc0724f4838%26relation%3Dparent.parent&container_width=39&href=https%3A%2F%2Fwww.tylercharboneauprofessional.com%2Finternational-pulse%2Fyour-guide-to-the-french-election%2F&layout=button&locale=en_US&mobile_iframe=false&sdk=joey" style="border: none; visibility: visible; width: 58px; height: 20px;" class=""></iframe></span>
</div>
</div>
</div>
<div class="sqs-block code-block sqs-block-code">
<div class="sqs-block-content">
<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" class="twitter-share-button twitter-share-button-rendered twitter-tweet-button" style="position: static; visibility: visible; width: 60px; height: 20px;" src="https://platform.twitter.com/widgets/tweet_button.5b6375bb17bd9edb2f4e7f8f12971999.en.html#dnt=true&id=twitter-widget-0&lang=en&original_referer=https%3A%2F%2Ftylercharboneauprofessional.com%2Finternational-pulse%2Fyour-guide-to-the-french-election&size=m&text=Your%20Guide%20to%20the%20French%20Presidential%20Election%2C%20and%20Why%20it%20Matters%20%E2%80%94%20Tyler%20Charboneau&time=1495223324688&type=share&url=https%3A%2F%2Ftylercharboneauprofessional.com%2Finternational-pulse%2Fyour-guide-to-the-french-election"></iframe>
</div>
</div>
<div class="sqs-block code-block sqs-block-code">
<div class="sqs-block-content">
<span class="IN-widget" style="line-height: 1; vertical-align: baseline; display: inline-block; text-align: center;"><span style="padding: 0px !important; margin: 0px !important; text-indent: 0px !important; display: inline-block !important; vertical-align: baseline !important; font-size: 1px !important;">
<span><a href="javascript:void(0);"><span>in</span><span><span></span><span>Share</span></span>
</a>
</span>
</span>
</span>
<script type="IN/Share"></script>
</div>
</div>
Each share button has been stripped of ids and are as generic as they could be for demonstration purposes. On each page, include the jQuery inside <script> tags and place that <script> block before the closing </body> tag. Any other modification to HTML is unnecessary. A better way is to use an external script and have each page point to that .js file. To save a http request you could add that those 3 lines to an existing .js script but you'll need to be familiar with jQuery/JavaScript to do so safely.
Explination
This template (like all templates of this nature, Squarespace, Word-Press, etc.) is a cluster-fu## of HTML. If you find a particular element and you need to actually move it, or behave in layout, or adhere to a flow, you'll need to move up the DOM hierarchy until you find the ancestor that has siblings. For example:
<div class='great-great-great-aunt'>
<!--Many levels of cousins-->
<span class='fb'>Facebook I need to liked!</span>
<!--...</div>...-->
</div>
<div class='great-great-grandma'>
<div class='great-grandma'>
<div class='grandma'>
<div class='mom'>
<span class='linkedIn'>Hey I'm a corporate clone! How about you?</span>
</div>
</div>
</div>
</div>
The target element in this example is .linkedIn (Note the . preceding the className, that is the proper syntax for a class selector in CSS and jQuery.) On the surface, that is the element you see in the browser. It's "cousin" icon is .fb, meaning that as far as relations go they are not siblings as it appears so when rendered in browser. They do not share the same parents as siblings would so styles that concern position, flow, layout, etc. will not affect a cousin. Cousins are isolated from each other because they are nested within their own parent element as well as any ancestor elements. Therefore you must find the ancestor of .linkedIn that has a sibling that is the ancestor of .fb. Confused? Me too.
Solution
Here is grandma:
#block-yui_3_17_2_1_1493318168221_183886
A # means id which is by far the easiest and most accurate way of locating a specific element. The reason id is the best means of selecting an element is because an id is unique on any given document (i.e. single webpage).
This is the ruleset that should bring that linkedIn icon inline with the Twitter and Facebook icons:
#block-yui_3_17_2_1_1493318168221_183886 { display: inline-block; top:3px}
Linkedin Share Example Check this jsfiddle: https://jsfiddle.net/wrahvvr2/
JS:
<script src="//platform.linkedin.com/in.js" type="text/javascript">
lang: en_US
</script>
<script type="IN/Share" data-counter="top"></script>
CSS(this should target the share button):
span[class="IN-widget"] {
display: inline-block;
background: red;
}
BTW:
You have an open script tage:
<script src="//platform.linkedin.com/in.js" type="text/javascript">
You should close it:
<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
The problem occurred on other projects, but then I made all the divs the same size. I made a print screen of my problem.
As you can see the the third div is a little longer then the others (and yes I want to keep this). My css or bootstrap wants to skip a row.
html
<div ng-repeat="work in myWork" class="col-lg-3 col-md-3 col-xs-12" id="myWorkHolders">
css
#myWorkHolders{
margin: 0px;
display: inline-table;
padding: 0px;
border: solid 1px #F4F4F4;
}
Problem
DIVS skip a row when the div above is not the same size as the others.
Question
what Css terms can I use so the divs will display under each other despite different sizes.
you can add an extra class with min-height to every div, just match the height of ur largest div and put that into css class.
<style>
.yourclass {
min-height:Xpx; //replace X with the height of your largest div.
}
</style>
and now just put this class into every div as:
<div class="col-md-3 yourclass">.col-md-3</div>
I have run into this problem before; I'm curious what other people say. Not sure if this is the best solution, but what I did that worked for me was assign a min-height to those divs. the min-height you assign will depend on the height of your largest div.
so:
#myWorkHolders{
margin: 0px;
display: inline-table;
padding: 0px;
border: solid 1px #F4F4F4;
/* the exact height specified will have to be experimented with */
min-height: 250px;
}
With bootstrap you need to use the row class to make sure the columns layout correctly no matter the height a particular column.
<div class="row">
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
</div>
<div class="row">
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
</div>
So when creating your loop you need to think about how to add in the row container after every fourth column.
Pretty common question, and typically revolves around a current situation, so after reading up on a bunch of different solutions and trying to slide them in I thought I'd just ask the age old question myself based on my situation.
Situation
I've built a little page slider using jQuery, and it appears to work as expected, then I noticed the CSS height was still set to a default value I had used for testing. After removing it I can't seem to get the height of the parent to open to the height of the different children. I know that setting the position of the different divs to relative instead of absolute will display them, but then the divs aren't positioned correctly anymore (situated underneath each other). Other solutions I've found revolve around not using markup that is even remotely common to my own.
Question
Is there a CSS fix for this that allows me to leverage Bootstrap the way I have it set up, and the jQuery animation I've already written? Or is their any suggestion(s) that will make this work without too much alteration to the markup? I've tried a couple different variations and this seems to be the most stable.
Code
I've added it to a jsFiddle. I couldn't get the animation to work in the fiddle for some reason (works on my laptop in all browsers), but the default layout should be enough to see how the parent doesn't respect the child elements.
<style>
.container {
margin-top: 50px;
}
.row {
margin-bottom: 20px;
}
.windowBox {
overflow: hidden;
}
.box {
background-color: #FFF;
position: absolute;
width: 100%;
}
.page1 {
top: 0;
left: 0;
opacity: 1;
z-index: 999; /* set to be over page2 onload */
}
.page2 {
top: 0;
left: 0;
opacity: 0;
z-index: 99; /* set to be under page1 onload */
}
</style>
<div class="container">
<div class="row">
<div class="col-sm-12">Header text should be above either page.</div>
</div>
<div class="row">
<div class="text-center">
<button type="button" id="showPage1" class="btn btn-danger" disabled>Page 1</button>
<button type="button" id="showPage2" class="btn btn-primary">Page 2</button>
</div>
</div>
<div class="row">
<div class="col-sm-12 windowBox">
<div class="row">
<div class="box page1">
<div class="hidden-xs col-sm-6">...</div>
<div class="col-sm-6">...</div>
</div>
<div class="box page2">
<div class="col-sm-12">...</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">Footer text should be under either page.</div>
</div>
</div>
DEMO
Added an .over class to your markup.
Thats the only change made there.
css
Over class is the container of the windowBox.
We want this to have a hidden overflow because it will contain all our pages side by side.
.over {
overflow: hidden;
}
This is a fixed value unfortunately. Basically its the width of your window X pages. If your going to add more then just one page, you can set this value in JavaScript.
.windowBox {
width: 220vw;
}
Then we simply set the container to be a "kind of" fixed width.
responsive width.. so 95 of view port width is reasonable.
.box {
background-color: #FFF;
width: 95vw;
display: inline-block;
float: left;
}
And in the JavaScript instead of setting the left property you set the margin-left.
You only need to do this for the first element so. If you want to scroll to page 4 you can set the first pages margin to -4 * 95vw
EDIT: Problem fixed. See my own answer for details. Will mark it as the answer in 2 days when SO lets me.
I am populating a div with a list of square images using Knockout. The div is currently of fixed width and height, though will eventually be resizeable. I would like the images to fill up the div row by row. So when image n reaches the boundaries of the div's width, image n+1 is wrapped around to the next row. Currently, the images flow over the boundaries of the div to fill the entire window.
The current markup is as follows:
<div data-bind="foreach: images" width="500" height="500">
<img data-bind="attr: { src: fileName }">
</div>
I've played around with float and overflow with no success so far. I've also tried putting the images in their own divs. The images exhibit the wrapping behaviour I want in the whole window to form a grid, just not in the div I've put them in.
How do I make the images stay inside the div while getting the grid that I want? Is this possible with HTML/CSS alone or does it require some Javascript?
As Daniel Weiner said in his comment - floats are the way to go. Add in display : inline-block; to keep each element aligned. Example:
#container {
width: 100%;
background-color: black;
display: inline-block;
}
.block {
height: 100px;
width: 100px;
background-color: #fff;
margin: 10px;
float: left;
}
<div id=container>
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<div class="block">5</div>
<div class="block">6</div>
<div class="block">7</div>
<div class="block">8</div>
</div>
My problem was that I was not specifying the length units for my containing div. In my original markup, I was using the HTML attribute width="500". Changing this to inline CSS and specifying the length unit solved the problem, keeping my 2D grid inside the div: style="width: 500px"
Besides this, as suggested by wahwahwah, the following style was required for a containing div for each image: float: left;
Inlining the CSS, the end result is:
<div data-bind="foreach: images" style="width: 500px">
<div style="float: left;">
<img data-bind="attr: { src: fileName }">
</div>
</div>