I installed the facebook comments plug-in on a website but the theme's color is overriding the chosen dark background color for the plugin:
The site is: truenode.org.
Scroll down to the bottom to see the plugin. It's all white but it should have a dark border. I've tried adding !important to the plugin's div background color to no avail.
How can I override this?
i am coding a very simple css navigation menu, im trying to the the "nav" div to stretch 100% width across the page, and set the last menu option to orange background and white text to no avail.
can someone have a look at my css code see where my problem is.
body {background: #282828;}
#nav ul{ margin:0; padding:0; list-style:none; }
#nav ul li{ margin-right:5px; padding:10px 20px; position:relative; height:20px; line-height:20px; background-color:#282c2b; color:#fff; }
#nav > ul > li { float: left; height:30px; line-height:30px; background-color:#282c2b; border-left:4px solid #282c2b; }
#nav li > ul{ visibility:hidden; position: absolute; top:0px; color:#fff; }
#nav > ul > li > ul{ width:100%; top:50px; margin-bottom:10px; left:-4px; }
#nav li:hover{ background-color:#ffffff; color:#282c2b; border-left:4px solid #ff3d00; }
#nav li:hover > ul{visibility:visible;}
#nav ul li .navOrange { background-color:#ff3d00; }
also a link to my codepen: http://ift.tt/1QkvlGO
i know it might be hard to achieve with pure css but is it possible to make the manu drop down upon clicking or is it just set to rollover without java script?
The auto scroll works for a couple messages on it's own. Then it randomly gives out and starts scrolling up when the user sends a message.
Here's the applicable Javascript. And the limited styles (Haven't really gotten to styling yet.) Also the site if you want a reference as to what it looks like. http://ift.tt/1cjVJCd
//send message
$messageForm.submit(function(e){
e.preventDefault();
socket.emit('send message', $messageBox.val());
$messageBox.val("");
$("#chat").animate({ scrollTop: $("#chat").height() }, "fast");
return false;
});
//Add the users message to the chat.
socket.on('pushMessage', function(data){
$chat.append("<li><b>" + data.nick+ ": " + "</b>" + data.msg + " </br>" + "</li>");
$("#chat").animate({ scrollTop: $("#chat").height() }, "fast");
});
Styling:
#chat{
height:500px;
width:300px;
overflow-y:scroll;
overflow-x:auto;
}
#mainWrap{
display:none;
}
#chatWrap{
float: left;
border:1px #000 solid;
overflow-y:scroll;
width:302px;
I'm having trouble with this and it's driving me crazy trying to figure out why it wants to take up the full width.
HTML
<div class="api-tile-ribbon-front">
<div class="api-tile-ribbon-text">
Finance<a href="#"> »</a>
</div>
</div>
CSS
.api-tile-ribbon-text {
color: #0C5B85;
padding-top: 8px;
display: inline;
height: 16px;
margin: 0 5px;
text-overflow: ellipsis;
line-height: 18px;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.api-tile-ribbon-front {
position: relative;
background-image: url("http://ift.tt/1cjVLu4");
background-repeat: repeat-x;
height: 36px;
max-width: 95%;
}
I'm using relative position so I can use the :before and :after images and I'm doing a bunch of stuff to truncate text with ellipsis.
Notice that the ribbons will automatically go to the max-width. I'd like the width to be determined by the textual content within. What is causing it to go full width and how can I stop it?
After seeing questions about this topic, I request your help.
/assets/stylesheets/styles.css: @import url("http://ift.tt/1cDTOkU");
When I run rails s on test or development, the font 'Merriweather' is loaded, but when I run server on production, the font is not loaded, but the styles.css is loaded.
• To put @import url(...) in application.css or welcome.scss or bootstrap.css.scss
• To change @import url('http://fonts.google...') by @import url('//fonts.google...')
application.css
*= require_tree .
*= require_self
*= require 'styles'
Github: http://ift.tt/1OYQTvs
Is there any possible way to get the text to not jump up and down? I can't use position: absolute. because it messes up the rest of my website. Please look at this fiddle: http://ift.tt/1cjSRFy
Here is the html:
<div id="rotating-item-wrapper">
<div class="rotating-item intro">Text 1</div>
<div class="rotating-item intro">Text 2</div>
<div class="rotating-item intro">Text 3</div>
<p class="slidermwtext"> Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut. </p>
See fiddle for javascript and css.
Thanks!
I am using a Gotham font, if you go to this website: http://fctrs.com and see the "//Value section header you will see that the "// is a larger height than the text.
I am using this CSS:
.section .subheading
{
font-family: "Gotham Bold";
font-size: 130px;
color: #c12330;
text-transform: uppercase;
margin-bottom: 10px;
margin-right: -12px; /* offset letter-spacing */
/*line-height: 1em;*/
}
.section .subheading.left-slashes:before
{
letter-spacing: -35px;
margin-right: 30px;
content: "//";
}
I would like the "//" to be the same height as the "Value" text.
Should I consider this a Font issue? My "Gotham Bold" Font asset is delivering the "//" to be a different height than that of AlphaNumberic characters in the Font asset?
I am trying to emulate this PSD capture:
I am trying to fadeIn a background color in the beforeSend and fadeOut in the success with ajax. I don't know what I have done wrong. Help, please.
var data={
action: 'tag_user_update',
postSearchNonce : MyAjaxSearch.postSearchNonce,
tag : $(this).closest("a").text(),
users_id : $("#users_id").val()
}
$.ajax({
url: MyAjaxSearch.ajaxurl,
type:'POST',
cache: false,
data:data,
beforeSend: function() {
$('.tag_link').animate({ backgroundColor:'yellow'},'slow');
},
success: function(data){
$('.tag_link').animate({ backgroundColor:'white'},'slow');
}
});//ajax
For my web-page, things work fine on Android API level 21.
But when I test the same page against Android API level 18, some features do not work.
When I toggle class "check" on .div1 with javascript. The .div2 display is not updated.
Here is sample HTML and sample CSS
HTML
<div class="div1 check"></div>
<div class="div2"></div>
<div class="div1"></div>
<div class="div2"></div>
CSS .div2{ display: none;} .div1.check ~ .div2{ display: block;}
Again, this works fine in Android API level 21 but facing issues in Android API level 18.
Any suggestions?
I'm trying to vertically align the shopping cart image and have it change on hover as well. I checked the other answers but they all seem involve changing the height.
JSFIDDLE http://ift.tt/1KKFnOs
.navlogo, .navlogo_strip {
z-index:99;
}
.navlogo img {
width:120px;
margin:10px 10px 10px 10px;
}
.navlogo_strip img {
width:50px;
margin:10px 10px 10px 10px;
}
.floatleft {
float:none;
}
.floatright {
float:none;
}
.nav_container ul li {
display: inline-block;
text-align: center;
line-height:90px;
}
.nav_container ul li a {
padding:50px 30px 50px 30px;
margin:0px;
cursor:pointer;
}
.nav_container ul {
/* margin-top:15px; */
margin-left:30px;
margin-top:0px;
}
.nav_container {
text-align: center;
width:100%;
font-size:16px;
letter-spacing: -1px;
}
.nav_container ul li:hover {
/* not needed background-color:#08298A; */
}
.nav_container ul li:hover a {
color:#fff;
background-color:#08298A;
}
header {
width:100%;
margin: auto;
min-width:420px;
/* 0 0 8px rgba(0,0,0,0.1)*/
}
HTML
<div class="navlogo floatleft">
<a href="http://localhost/auction/"><img src="logo.png" /></a>
</div>
<div class="desktopnav">
<div class="floatleft">
<div class="nav_container">
<ul>
<li><a href="">Browse</a></li><li><a href="">Sell</a></li>
</ul>
</div>
</div>
<div class="floatright">
<div class="nav_container">
<ul>
<li><a href=""><img src="http://ift.tt/1KKFnhg" /></a></li><!-- <li><a href="">Profile</a></li> --><li><a href="">Sign out</a></li>
</ul>
</div>
</div>
</div>
<div style="clear:both;"></div>
</header>
PLEASE HELP OR TELL ME IF THIS IS POSSIBLE BY ENSDAY NIGHT. The spinning and everything works it just wont go where i want or reload when its re-selected.I want the 360 image sequence to be displayed at the bottom in the caption div, but i cant get it in there. Also i want the 360 image sequences to load only for each still image above the caption that corresponds to each 360. i dont know how to link everything properly in jfiddle but the code is there if you think you can help.
$(document).ready(function(){
$('.carousel_data .carousel_item').each(function(){
$('#carousel').append($(this).find('.image').html() );
});
createCarousel();
showCaption();
});
//custom function for roundabout called createCarousel
function createCarousel(){
$('div#carousel').roundabout({
childSelector: 'img',
startingChild: window.startingItem,
tilt: -11.5,
minOpacity: 7,
minScale: .3,
duration: 1200,
clickToFocus: true,
clickToFocusCallback: showCaption
});
createCustomButtons ()
}
//custom function to wire next & prev buttons to roundabout carousel
function createCustomButtons (){
$('.nextItem').click(function(){
hideCaption();
$('div#carousel').roundabout('animateToNextChild', showCaption);
});
$('.prevItem').click(function(){
hideCaption();
$('div#carousel').roundabout('animateToPreviousChild', showCaption);
});
$('div#carousel img').click(function(){
hideCaption();
});
}
//custom function to showCaption
function showCaption(){
var childInFocus = $('div#carousel').data('roundabout').childInFocus;
var setCaption = $('.carousel_data .carousel_item .caption:eq('+childInFocus+')').html();
$('#captions').html(setCaption);
var newHeight = $('#captions').height()+'px';
$('.caption_container').animate({'height':newHeight},500,function(){
$('#captions').animate({'opacity':1},150);
});
}
function hideCaption(){
$('#captions').animate({'opacity':0},250);
}
I am trying to create a drop down like functionality where a div is shown once somebody starts typing in the input box. I am able to attach mouse click event on the individual elements to select them. But I am not able to select them via pressing enter.
HTML
<input type="text" class="input" name="example" id="example" placeholder="example..." autocomplete="off" list="examplelist" />
<div class="autofill">
<ul class="autocomplete">
<li class="autocomplete-list">John Doe (San Jose, CA)</li>
<li class="autocomplete-list">Jane Doe (San Francisco, CA)</li>
<li class="autocomplete-list">John Jane (San Carlos, CA)</li>
</ul>
</div>
JQuery
$(document).ready(function () {
var $listItems = $('li.autocomplete-list'),
$div = $('div.autofill'),
$input = $('#example');
$div.hide();
$('input#example').on('keydown', function (e) {
var key = e.keyCode,
$selected = $listItems.filter('.selected'),
$current;
$div.show();
if (key != 40 && key != 38) return;
$listItems.removeClass('selected');
if (key == 40) { // Down key
if (!$selected.length || $selected.is(':last-child')) {
$current = $listItems.eq(0);
} else {
$current = $selected.next();
}
} else if (key == 38) { // Up key
if (!$selected.length || $selected.is(':first-child')) {
$current = $listItems.last();
} else {
$current = $selected.prev();
}
}
$current.addClass('selected');
// When I press enter after selecting the li element
// Does not work :(
$current.on('keypress keydown keyup', 'li', function (event) {
if (event.keyCode == 13) {
var value = $(this).text().split('(')[0].trim();
$input.val(value) ;
$div.hide();
}
});
});
// If somebody clicks on the li item
$('li.autocomplete-list').on('click', function (e) {
var value = $(this).text().split('(')[0].trim();
$input.val(value);
$div.hide();
});
// change color on hover
$('li.autocomplete-list').hover(
function(){ $(this).addClass('hover') },
function(){ $(this).removeClass('hover') }
);
// When I press enter after selecting the li element
// Does not work :(
$('li.autocomplete-list').on('keypress keydown keyup', 'li', function (event) {
if (event.keyCode == 13) {
var value = $(this).text().split('(')[0].trim();
$input.val(value) ;
$div.hide();
}
});
});
How can I select a particular li element and then take its value when press enter? Here is the JSFiddle
I want to apply red color only to class t2 which are followed by t3.
For example
<div class="t1">
<div class="t2">2</div>
<div class="t3">3</div>
</div>
<div class="t1">
<div class="t3">3</div>
<div class="t2">2</div>
<div class="t4">4</div>
</div>
<div class="t1">
<div class="t2">2</div>
</div>
I want to apply red color only to class t2 which are followed by t3 in class t1.
t2 + t3 -> selects t3 and applies css to t3 t2 ~ t3 also does the same.
what other options do I have. Order or t2 is not know as it might be first/last/any child of t1.
I need to set the icon for cursor when a user is dragging DIV (red div in the following example).
I have tried several attempt, including using CSS cursor:move and event.dataTransfer.dropEffect with no success, as the icon always show up a "crossed circle".
Any ideas how to solve this issue using HTML5 drag-and-drop API?
<script>
window.app = {
config: {
canDrag: false,
cursorOffsetX: null,
cursorOffsetY: null
},
reset: function () {
this.config.cursorOffsetX = null;
this.config.cursorOffsetY = null;
},
start: function () {
document.getElementById('target').addEventListener('dragstart', function (event) {
console.log('+++++++++++++ dragstart')
this.config.cursorOffsetX = event.offsetX;
this.config.cursorOffsetY = event.offsetY;
this.adjustPostion(event);
event.dataTransfer.effectAllowed = 'move';
event.dataTransfer.dropEffect = 'move';
}.bind(this));
document.getElementById('target').addEventListener('drag', function (event) {
console.log('+++++++++++++ drag')
this.adjustPostion(event);
}.bind(this));
document.getElementById('target').addEventListener('dragend', function (event) {
console.log('+++++++++++++ dragend')
this.reset();
}.bind(this));;
},
adjustPostion: function (event) {
if (event.pageX <= 0 || event.pageY <= 0) {
console.log('skipped');
return;
}
var elm = document.getElementById('target');
elm.style.left = (event.pageX - this.config.cursorOffsetX) + 'px';
elm.style.top = (event.pageY - this.config.cursorOffsetY) + 'px';
console.log(event.pageX);
console.log(event.pageY);
}
};
</script>
This may sound quite silly, but I have no idea how to make a thin line smaller then 1px.
What I am looking for is something like this:
If you do:
.nav-bar {
border-bottom: 1px;
}
It's almost twice, if not three times as thick. As you are also probably aware, doing 1em would just round up to 1px.
Anyone have any ideas?
Im a total newbie as far as mobile devices are concerned. Anyhow, i created a webpage (still under construction) and implemented it on the existing wp theme called govpress (yes, i know it might not be the most practical way to make things happen but with my coding skills it was the easiest). Now i just cant get it working correctly with mobile devices. I havent found the code that makes it behave as it does. So, on a mobile it seems to scale the page to screen width resolution of the device(?). Also the background and the header div (full width) scales to device screen width. And even if i zoom out it doesnt enlarge the bg nor the header div. Is it the theme that has this behavior somewhere coded or is it somewhere in the css..!? Heeeelp, please!!!
Find the site on http://ift.tt/1ciYXWE And heres my css: http://ift.tt/1EOF8Qr (lots of thrash there though) Please ask if you need anything else! Thanks in advance!
I'm having problems getting a table to display uniformly across browsers using Twitter Bootstrap 3.
Here's the HTML:
<div class="row">
<div class="col-md-10 col-md-offset-1">
<table class="table table-striped table-responsive first-table">
<thead>
<tr>
<th>Ingredient</th>
<th>Amount <span class="glyphicon glyphicon-question-sign" data-toggle="popover" title="Amount" data-content="This is the amount of the ingredient you want to appear on the label." aria-hidden="true"></span></th>
<th>% Carrier <span class="glyphicon glyphicon-question-sign" data-toggle="popover" title="Carrier" data-content="The amount of carrier (or salt) that's used with the ingredient. This information should come from the quality assurance docs from the supplier." aria-hidden="true"></span></th>
<th>$$/Kilo <span class="glyphicon glyphicon-question-sign" data-toggle="popover" title="Price" data-content="The price of the ingredient. You should get this from your supplier." aria-hidden="true"></span></th>
<th>Who Sources? <span class="glyphicon glyphicon-question-sign" data-toggle="popover" title="Source" data-content="Choose whether or not you or the manufacturer will source the ingredient." aria-hidden="true"></span></th>
<th>Pack Size <span class="glyphicon glyphicon-question-sign" data-toggle="popover" title="packSize" data-content="The minimum packsize of the ingredient supplied by the provider. You only have to fill this out if you're sourcing the ingredient yourself." aria-hidden="true"></span></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr class="formulaRow">
<td>
<input type="text" class="ingredient required" name="ingredient">
</td>
<div class="col-md-1">
<td>
<div class="input-group">
<input type="number" class="amount required small-input" name="amount" >
<div class="input-group-addon">mg</div>
</div>
</td>
</div>
<td>
<div class = "input-group">
<input type="number" class="carrier required small-input" name="carrier" max="100">
<div class="input-group-addon">%</div>
</div>
<p class="message">Only use numbers smaller than 100</p>
</td>
<td>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="number" class="price required small-input" name="price" size="6">
<div class="input-group-addon">.00</div>
</div>
</td>
<td>
<select class="tableDropDown" style="min-width: 100px;">
<option value=true>The Manufacturer</option>
<option value=false>Me</option>
</select>
</td>
<td>
<div class="input-group">
<input class="packSize small-input" type="number" size="8" disabled>
<div class="input-group-addon">kg</div>
</div>
</td>
<td>
<a><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span></a>
</td>
<td>
<a><span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
You can also see it here: http://ift.tt/1IdWl8d
It's the table that displays under the heading: "Per Serving"
What I want: For it to be evenly centered in the screen and so you don't have to scroll to the right to finish filling in the input fields.
My condundrum: It works fine in Mozilla. It also works fine in Chrome when I view it offline from the files on my computer.
But it bleeds to the right in Chrome and IE when I view it online.
I'm not sure why has the desired effect in Mozilla but not the other two.
The ultimate goal is to have it center-align if at all possible (or close to it).
Also, here are two screenshots to demonstrate what I'm talking about.
On Chrome, the table does not offset on the right and instead gets pushed out of the window:
Whereas in Firefox it justifies properly:
I am looking for a tutorial on how to reproduce an effect very similar to http://ift.tt/1E9nbt3 I really like the way it animates and navigates. Does anyone have any pointers. Much appreciated,
Cheers, Greg.
The site I am making has a hover menu, what is best practice to deal with this for touchscreens. How can I get it to work on mobile devices?
I googled this and some responses suggest:
:active
So I tried a quick fiddle on an iPhone, but it doesn't appear to work.
Whats the correct way to tackle this and why does my fiddle not work?
Also is there a CSS only solution?
I am trying to target individual posts so I can change the css (title tags, padding, etc) of specific posts. My Wordpress site currently generates the posts in a loop.
index.php code (brings in content.php which has 'post' code)
<div>
<?php if ( have_posts() ) : ?>
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php
get_template_part( 'content' );
?>
<?php endwhile; ?>
<div class="clearfix"></div>
<div class="col-md-12">
</div>
<?php else : ?>
<?php get_template_part( 'no-results', 'index' ); ?>
<?php endif; ?>
</div>
content.php code (gets post-title, category, and sets post-thumbnail to background-image)
<?php
if (has_post_thumbnail()) {
$thumbnail_data = wp_get_attachment_image_src(get_post_thumbnail_id( get_the_ID()), 'my-fun-size' );
$thumbnail_url = $thumbnail_data[0];
}
?>
<article id="post-<?php the_ID(); ?>" style="background-image:url('<? php echo $thumbnail_url ?>')" <?php post_class('container-fluid'); ?> >
<div class="row">
<div class="col-md-12">
<h2><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
<?php the_category(', '); ?>
</div>
</div>
</article><!-- /#post -->
functions.php (setting image size)
add_theme_support( 'post-thumbnails' );
add_image_size('my-fun-size', 'thumbnail');
The output is 'rows' 100% width with the title, category and background-image (feature-image). Stacked on top of each other. I want to be able to target the text and bg-image of different posts to make them each look different.
I've spent a long time trying to get this working.
I have a section called "RightExtra" and a div inside it called "RightExtraContent". I'm trying to make it so that these two divs can move freely when the window is resized up to a certain point, without affecting the position of any other divs.
Here is a visual explanation of what I mean:
And here is the fiddle: http://ift.tt/1c33tI9
I've tried a bunch of different code combinations and still no success...
Thank you.
HTML:
<body>
<section id="heady">
<div style="width:1000px;margin-left:auto;margin-right:auto;">
<div style="text-align: left;padding:25px 0px;display:inline-block;float:left;font-size:18px;"><b><a href="index.html">Calories</a></b></div>
<div style="text-align: right;padding:25px 00px;display:inline-block;float:right;">
<!--<a href="profile.html">Home</a> | -->
<a href="index.html">Sign In</a> |
<a href="index.html">Sign Up</a>
</div>
</div>
</section>
<section id="RightExtra">
<div id="RightExtraContent">
Yes hello....!
</div>
</section>
<section id="wrapper">
<br><br>
<div class="UpCenter">
<div style="vertical-align:top;display:inline-block;">
<ul class="navbar cf">
<li>
<a href="#" class="ActiveListItem">Category</a>
<ul>
</ul>
</li>
</ul>
</div>
<div class="lister" style="display:inline-block;vertical-align:top;padding:0px 0px 0px 10px;">
<form action="">
<input type="text" class="clearable" placeholder="Add your meals here..." autocomplete="off">
</form>
</div>
<div id="mag" style="display:inline-block;vertical-align:top;">
<img src="images/magCircy.png" width="33px" height="33px" onClick="changeHeight(this,event);"></img>
</div>
</div>
</div>
</section>
<section id="followfoot">
</section>
</body>
CSS:
/*adder*/
@import url(http://ift.tt/YlWz97, 300, 600);
* {
padding:0;
margin:0;
}
html {
background:#1e1e1e; /*Back Colors 1*/
}
body {
background-color:#1e1e1e;
/*background:url('http://ift.tt/1xlzFR9');*/
}
a {
color: #FFFFFF;
text-decoration: none;
}
a:active, a:hover {
text-decoration: underline;
}
.nofancy a {
text-decoration: none;
} /*These nofancies don't work*/
.nofancy a:hover {
text-decoration: none;
} /*These nofancies don't work*/
#heady {
text-align: center;
width:100%;
height:75px;
background-color:#1e1e1e; /*Back Colors 2*/
font-family: Tahoma;
font-size: 16px;
color:#000000;
position:relative;
margin-bottom:30px;
}
#wrapper {
text-align: center;
width:1000px;
height:100%;
margin-left:auto;
margin-right:auto;
/*background-color:#1e1e1e; Back Colors 3*/
font-family: Tahoma;
font-size: 16px;
position:relative;
}
#RightExtra{
background-color:none;
width:500px;
float:right;
margin-left:auto;
margin-right:auto;
position:relative;
}
#RightExtraContent{
font-family: Tahoma;
font-size: 16px;
height:800px;
width:300px;
color:white;
background-color:#343434;
text-align:center;
border-radius:30px;
position:fixed;
float:right;
}
#followfoot{
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 180px;
background-color:none;
text-align:center;
/*display:none;*/
}
#mag{
background-color: #739FE0;
border-color:#739FE0;
border-style:solid;
border-width:2px;
border-radius:20px;
line-height:10px;
text-align:center;
margin-left:8px;
cursor:pointer;
}
#feety {
text-align: center;
width:100%;
height:0px; //100px
background-color:darkslateblue; /*Back Colors 4*/
font-family: Tahoma;
font-size: 16px;
color:white;
position:fixed; //Changing this to relative makes followfoot disappear when you scroll long enough.
}
.UpCenter{
/*background-color:#1e1e1e; Back Colors 5*/
padding-top:30px;
margin-bottom:50px;
height:90px;
}
.SignUp{
background-color:#ccc;
border-width:1px;
border-color:#ccc;
border-radius:10px;
width:75px;
padding:0px 0px;
margin-left:30px;
text-align:center;
float:right;
}
/* clearfix */
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
.cf {
* zoom: 1;
}
ul.navbar {
border-style:solid;
border-width:1px;
border-color:#739FE0;
width: 100px; /*Widthchanger1*/
border-radius: 4px;
margin-left:0px;
margin-right:0px;
font-size:14px;
height:33px;
}
ul.navbar li a.ActiveListItem {
color:white; !important;
background-color:#222 !important;
padding:7.5px 0px !important;
font-weight:normal !important;
margin-left:0px; /*Widthchanger2, got the activeitem centered with list text this way*/
margin-right:0px;
border-radius: 4px;
height:18px;
width:100px; /*kinda messes with width of text*/
margin-bottom:1px;
}
ul.navbar li {
position: relative;
width:100px; /*Changes width of actual list*/
}
ul.navbar li a {
display: block;
color: white;
padding:10px 5px;
text-decoration:none;
transition: all .1s ease-in;
}
ul.navbar li a:hover,
ul.navbar li:hover > a {
/*background:black; */
background:#739FE0;
color:#FFFFFF;
/*font-weight:600;*/
/*border-bottom-color:#FFFFFF;
border-bottom-style:solid;*/
/*border-color:#FFFFFF;
border-style:solid;
border-width:1px; */
}
ul.navbar li ul {
margin-top: 0px; /*Controls space from listdropdown to listchooser*/
position: absolute;
background: #222;
font-size: 14px;
/* min-width: 200px; */
display: none;
z-index: 99;
box-shadow: inset 0 0px 3px rgba(0,0,0,.6),
0 5px 10px rgba(0,0,0,.6);
}
ol, ul { list-style: outside none none; }
.hidden { display: none; }
/*Lister*/
form { }
.lister input {
width:235px; /*width of todo input box*/
height:33px;
padding-left:10px;
padding-right:10px;
border-width: 1px;
border-style:solid;
border-color:#739FE0;
float:left;
margin-bottom:20px;
font-size:14px;
font-family:"Tahoma";
background-color:#222;
color:white;
}
.lister input:focus {
outline:none;
border-color:#739FE0; /*ccc*/
box-shadow:0px 0px 7px 0px #739FE0;
}
.lister ul {
/*list-style: square inside;*/
padding: 10px 0px 55px 0px; /* padding for outside area of list*/ /* This is what's visible when not in use Used to be 10*/
/*height:50px;*/
/*background: #0f705d; DarkerOutsideColor*/
background:none;
/*width: 100%;*/
font-family:"Tahoma";
}
.active {
text-align:center;
}
.inactive { display: none;}
.lister li {
font-size:14px; /*font size of list items*/
/*font-weight: 600;*/
color: #181818; /*Font Color d5faf3*/
display:inline-block; /*This makes the items side-by-side and not columns*/
padding:9px;
margin-bottom:5px; /*SEPARATE*/
/* float:left; Interferes with text-align of Active*/
}
.lister li:nth-child(odd) {
background: #343434; /*LighterInside Color,Odd*/
border-color:#ccc;
border-width:1px;
border-radius: 5px;
border-style:solid;
box-shadow: 0px 0px 10px 0px #000000;
color:#ccc;
/*opacity:0.6;
filter:alpha(opacity=60);*/
}
.lister li:nth-child(even) {
background: #343434; /*LighterInside Color,Even*/
border-color:#ccc;
border-width:1px;
border-radius: 5px;
border-style:solid;
box-shadow: 0px 0px 10px 0px #000000;
color:#ccc;
}
.lister li > a {
/*float: right;*/
text-decoration: none;
color: white;
font-weight: bold;
/*transition: all .2s ease-in-out;*/
/*position:relative;*/
margin-top:2px;
display:inline-block;
}
.lister li > a:hover {
/*font-size: 105%;*/
/*color: #c0392b;*/
color:#000000;
}
.lister li > span {
display:inline-block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
max-width:379px;
}
/*Clearable*/
.clearable {
/*background: #fff; */
/*background:url(../images/splusgreen.png); */
background-repeat: no-repeat;
background-size: 10px 10px;
background-position:right 5px center; /* -15*/
transition: background 0.4s;
}
.clearable.x { /*background-position: right 5px center;*/ }
.clearable.onX { cursor: pointer; }
There's an element on my page that's visible in Chrome but disappears in Firefox even though it's using the tinymce library that clearly intended it to be visible.
The element is the button in:
<div class="mce-reset" role="application">
<div id="mceu_17-head" class="mce-window-head">
<div id="mceu_17-title" class="mce-title">Add Parshan Link</div>
<button class="mce-close" aria-hidden="true" type="button">×</button>
<div id="mceu_17-dragh" class="mce-dragh"></div>
</div>
...
and it doesn't help to remove the setting aria-hidden="true" (though I don't know why it's there). Some of the relevant CSS is:
.mce-window-head .mce-close {
position: absolute;
right: 15px;
top: 9px;
font-size: 20px;
font-weight: bold;
line-height: 20px;
color: #858585;
cursor: pointer;
height: 20px;
overflow: hidden;
}
.mce-window-head .mce-close {
position: absolute;
right: 15px;
top: 9px;
font-size: 20px;
font-weight: bold;
line-height: 20px;
color: #858585;
cursor: pointer;
height: 20px;
overflow: hidden;
}
.mce-container, .mce-container *, .mce-widget, .mce-widget *, .mce-reset {
margin: 0px;
padding: 0px;
border: 0px none;
outline: 0px none;
vertical-align: top;
background: none repeat scroll 0% 0% transparent;
text-decoration: none;
color: #333;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
text-shadow: none;
float: none;
position: static;
width: auto;
height: auto;
white-space: nowrap;
cursor: inherit;
line-height: normal;
font-weight: normal;
text-align: left;
box-sizing: content-box;
direction: ltr;
max-width: none;
}
.mce-container, .mce-container *, .mce-widget, .mce-widget *, .mce-reset {
margin: 0px;
padding: 0px;
border: 0px none;
outline: 0px none;
vertical-align: top;
background: none repeat scroll 0% 0% transparent;
text-decoration: none;
color: #333;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
text-shadow: none;
float: none;
position: static;
width: auto;
height: auto;
white-space: nowrap;
cursor: inherit;
line-height: normal;
font-weight: normal;
text-align: left;
box-sizing: content-box;
direction: ltr;
max-width: none;
}
button, input[type="submit"], input[type="button"] {
background: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6) no-repeat scroll 0 0 #fafafa;
border-color: #ccc #ccc #bbb;
border-radius: 4px;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
color: #333;
cursor: pointer;
display: inline-block;
font-size: 13px;
line-height: 18px;
padding: 4px 10px;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
}
I found that if I add
padding: inherit;
to the element's style, then the element is always visible, but with improper padding.
I also see that the CSS is getting loaded twice which is not proper, but might not be what's causing the problem.
Can anyone please tell me what's causing the element to become invisible (It's there and can be clicked on but I can't see it)? To see the problem, please go to the page, click on the words "agreeing with I.B.", then click on the "Parshan" button in the toolbar that appears above the text. There is a button at the top right corner of the dialog box which I can't see in Firefox (latest release: 37.0.2).
Also note: When I inspect the element via Firefox, the × often appears immediately.
I'm running on Windows 8.1 64 bit, but the problem is also sometimes seen on Windows 7.
Thanks a lot!!
<!DOCTYPE><html><style>
#a {
-ms-filter: " progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='red', EndColorStr='blue') progid:DXImageTransform.Microsoft.Alpha(Opacity=50) progid:DXImageTransform.Microsoft.Matrix(M11=0.8660254037844387, M12=-0.49999999999999994, M21=0.49999999999999994, M22=0.8660254037844387, sizingMethod='auto expand');";
width: 100px;
height: 100px;
}
#b {
-ms-filter: " progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='red', EndColorStr='blue') progid:DXImageTransform.Microsoft.Matrix(M11=0.8660254037844387, M12=-0.49999999999999994, M21=0.49999999999999994, M22=0.8660254037844387, sizingMethod='auto expand') progid:DXImageTransform.Microsoft.Alpha(Opacity=50);";
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="a">a</div>
<div id="b">b</div>
</body>
</html>
Why in IE8 if the opacity is before rotation div is with distorted width? And if the opacity is after rotation works?
A webpage I'm working on uses some fancy chevrons for bullet points in a list. I'd like to define a list style that scales with the font size of the list items itself: doing so is the ultimate end goal of my problem here.
We currently keep those chevrons in SVG files (one of which is offered below) so they can be magnified without looking terrible. They're referenced like this:
ul.foo {
list-style-image: url("../images/chevron.svg");
}
We use these chevron lists a few times each around the site. Sometimes they're with large text, sometimes with smaller or normal sized text. We're forced to create a new chevron image for each font size (e.g. chevron-small.svg, chevron-medium.svg, chevron-large.svg, etc), but surely there's a better way that lets us use just the one image and have it scaled up and down on its own based on the font size!
However, I haven't figured out how to make the image scale with the font size yet.
The W3 wiki for list-style-image suggests that "if the image's intrinsic width or height is given as a percentage, then that percentage is resolved against 1em", which sounds like it's exactly what we want. I haven't worked out how to make this happen though. Brian Campbell's answer to How can I make an svg scale with its parent container? appears to suggest a way to make this percentage thing happen, but when I set a width or height of 100%, the chevron bullet points show up extremely tiny or not at all, even when the font size is large.
How can I make this list-style-image scale fully with the text size, so that as a UL's text size gets larger, the bullet image does too?
(Glyph fonts: We can't use them. They'd get the job done visually, but they have a bad impact on accessibility because screen readers won't read out the bullets as bullets but as some other weird character. We could define a custom glyph font, possibly, and replace the bullet characters in it with ours, but the file size overhead in doing so would be excessive. As far as I can tell, we need to use an image.)
The SVG comes from Illustrator and has this code:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://ift.tt/IHuy5b">
<svg version="1.1" id="Layer_1" xmlns="http://ift.tt/nvqhV5" xmlns:xlink="http://ift.tt/PGV9lw" x="0px" y="0px"
width="8px" height="14px" viewBox="0 0 8 14" enable-background="new 0 0 8 14" xml:space="preserve">
<path fill="#666666" d="M0.37,12.638l5.726-5.565L0.531,1.347C0.252,1.059,0.261,0.601,0.547,0.321
c0.289-0.279,0.746-0.272,1.026,0.016l6.062,6.24c0,0.002,0.006,0.004,0.008,0.006c0.068,0.07,0.119,0.156,0.156,0.244
C7.902,7.088,7.846,7.399,7.631,7.61c-0.002,0.004-0.006,0.004-0.01,0.006l-6.238,6.063c-0.143,0.141-0.331,0.209-0.514,0.205
c-0.187-0.006-0.372-0.078-0.511-0.221C0.076,13.376,0.083,12.919,0.37,12.638"/>
</svg>
Which shows up like the following, where the text is 16px, and the chevron isn't scaling to font size, but is decently large and visible (a bit larger than desired in this case, but let's ignore that, since the image itself can be edited):
As I stated, I tried to follow Brian Campbell's answer and set the width or height property to 100%:
<svg version="1.1" id="Layer_1" xmlns="http://ift.tt/nvqhV5" xmlns:xlink="http://ift.tt/PGV9lw" x="0px" y="0px"
width="100%" viewBox="0 0 8 14" enable-background="new 0 0 8 14" xml:space="preserve">
However, having either width or height defined as 100% seems to make the chevrons tiny, and much smaller than 1em, as stated:
(Screenshot from Firefox. In Chrome they're a little bit bigger, still far smaller than 16px.)
/*
The image referenced here is the SVG provided above, with base 64 encoding. It is the
freshly exported version that still has a defined width and height of 8px and 14px.
You may wish to just save the SVG above locally.
*/
ul {
list-style-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI4cHgiIGhlaWdodD0iMTRweCIgdmlld0JveD0iMCAwIDggMTQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDggMTQiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiM2NjY2NjYiIGQ9Ik0wLjM3LDEyLjYzOGw1LjcyNi01LjU2NUwwLjUzMSwxLjM0N0MwLjI1MiwxLjA1OSwwLjI2MSwwLjYwMSwwLjU0NywwLjMyMWMwLjI4OS0wLjI3OSwwLjc0Ni0wLjI3MiwxLjAyNiwwLjAxNmw2LjA2Miw2LjI0YzAsMC4wMDIsMC4wMDYsMC4wMDQsMC4wMDgsMC4wMDZjMC4wNjgsMC4wNywwLjExOSwwLjE1NiwwLjE1NiwwLjI0NEM3LjkwMiw3LjA4OCw3Ljg0Niw3LjM5OSw3LjYzMSw3LjYxYy0wLjAwMiwwLjAwNC0wLjAwNiwwLjAwNC0wLjAxLDAuMDA2bC02LjIzOCw2LjA2M2MtMC4xNDMsMC4xNDEtMC4zMzEsMC4yMDktMC41MTQsMC4yMDVjLTAuMTg3LTAuMDA2LTAuMzcyLTAuMDc4LTAuNTExLTAuMjIxQzAuMDc2LDEzLjM3NiwwLjA4MywxMi45MTksMC4zNywxMi42MzgiLz48L3N2Zz4=');
/* Or if you wish to save the SVG locally:
list-style-image: url('chevron.svg');
*/
}
.small-list {
font-size: 85%;
}
.large-list {
font-size: 150%;
}
<ul class="small-list">
<li>The goal is to make the chevron smaller for this list</li>
<li>Specifically, just slightly smaller than capital letters, as stated.</li>
<li>Nomas matas</li>
<li>Roris dedit</li>
</ul>
<ul class="large-list">
<li>And larger for this list</li>
<li>Nomas matas</li>
<li>Roris dedit</li>
</ul>
I have a one pager that shows one page at a time and that uses animation when transitioning from one page to the next. It works like this:
I currently use a CSS 3 transition animation on the opacity of the page. This issue is however that during the time the spinner is visible the user can still interact with the (invisible) form of the page that just faded out (it's not gone, it's just invisible using opacity).
So I would like to have a CSS only solution that sets the page to visibility: hidden at the end of the transition (I cannot use display: none). What would be the way to go here?
I have a dynamically populated div-based dropdown that extends past the end of the screen when the customer puts lots of entries in it, hiding the lower entries. It is on one column in a set of data entry rows (td elements), so the available space varies on which row is being entered.
Unfortunately this is an application I've inherited, don't have any help with, and don't really have the skill set to maintain, so I would appreciate a bit of 'explain like I'm five'. Also, my apologies for the wall of text.
From extensive Googling and examination of other code in the application I believe an optionsCollection would solve this specific problem, but I need to fire off a function to set other data when the selected value changes and haven't found a way to do that with optionsCollection.
Unfortunately this thing is simply too big to post, and I would likely mangle it if I tried to package the problem in a standalone, so here's what I think is the relevant code.
The div
<div class="empform">
<html:form action="/processBlank">
<div id="divJobClass" style="visibility: hidden; position: absolute; height="50px"
border-color: #fff; border-style:solid; border-width: 1px; background: white; opacity: 1">
<table id="tableJobClass" cellspacing="0" style="border-color: #9090ff; border-style:solid; border-width:1px;" cellpadding="0"> <%
ctr = 0;
for (JobClassVO jc : jcList) { // href="setJC(<%=jc.getGuid()% >, '< %=jc.getJcIdDesc()% >')" %>
<tr><td><input style="border: none; background: white" type="text"
id="jc<%=ctr%>" size="50" value="<%=jc.getJcIdDesc()%>" readonly="readonly"
onclick="setJC(<%=jc.getGuid()%>, '<%=jc.getJcIdDesc()%>', <%=ctr%>)"
onkeydown='jcListCheck(event);'></td></tr><%
ctr++;
}
%>
Where the dropdown gets triggered by clicking on the field
<td>
<html:hidden name="erfEmployee" property="jcGUIDString" indexed="true"/>
<html:text name="erfEmployee" property="jcId" indexed="true"
size="8" maxlength="25" onblur='<%= "isLastRow('JobClass', " + count + ");" %>'
onclick='<%= "showJcList(" + count + ");" %>'
onkeydown='<%= "jcCheck(event," + count + ");" %>'
onchange='<%= "verifyHoursClass(" + count + ");" %>' readonly="true" />
</td>
isLastRow, jcCheck and onChange are not related to the appearance. The functions used to make the div appear
function showJcList(index) {
var fld = elem("erfEmployee[" + index + "].erfEeSsnFormatted");
if (fld.value == "")
return;
var div = elem_("divJobClass");
jcGuidTarget = elem("erfEmployee["+index+"].jcGUIDString");
jcIdTarget = elem("erfEmployee["+index+"].jcId");
showList(jcIdTarget, div, jcGuidTarget);
focusSelected("jc", null, <%=jcList.size()-1%>);
}
function showList(idTarget, div, guidTarget) {
ddDiv = div;
if (ddDiv.style.visibility == "visible") {
ddDiv.style.visibility = "hidden";
return;
}
var iTop = 0, oNode = idTarget, iLeft = 0;
while(oNode.tagName != "BODY" && oNode.tagName != "HTML") {
iTop += oNode.offsetTop;
oNode = oNode.offsetParent;
}
oNode = idTarget;
while(oNode.tagName != "BODY" && oNode.tagName != "HTML") {
iLeft += oNode.offsetLeft;
oNode = oNode.offsetParent;
}
ddDiv.style.left = "" + iLeft + "px";
ddDiv.style.top = "" + (iTop + idTarget.offsetHeight) + "px";
ddDiv.style.visibility = "visible";
ddIdTarget = idTarget;
ddGuidTarget = guidTarget;
}
Several sites I searched suggested overflow:auto and setting a size, but that didn't seem to change anything. Maybe I messed up setting the size? But it seems to me a fixed size wouldn't help as the available space depends on which row is being entered. I found that overflow:scroll gave me horizontal and vertical scroll bars, but the bars just extend with the div right off the end of the screen. I've considered trying to figure out how much room is left, and making the div appear high enough to fit, but I think that would be ugly. I'll go there if I have to though.
Any tips, help, pointers to ideas would be very appreciated. Thanks.
I want to use pure javascript (not jquery) to close a pure css drop-down menu I have created when clicking outside of the menu. How can I do this?
HTML:
<ul>
<div class="submenu">
<ul></ul>
</div>
<div class="submenu">
<ul></ul>
</div>
</ul>
That's the basic structure of my HTML. I want to close the submenu if clicking outside of the submenu. Any way to do so with pure javascript? So far I've tried this:
Javascript:
<script>
document.onclick = closeMenu();
function closeMenu() {
document.getElementsByClassName("submenu").style.display = 'none';
}
</script>
This doesn't seem to work. Any ideas?
Using jQuery tablesorter to sort and give style to each odd row in the table.
Issue: IE8 ignores the table row background or wouldn't apply the style for odd rows. Any idea how to make this work for IE < 9?
Thanks!
<html>
<head>
<style type="text/css">
.tablesorter tbody tr:nth-child(odd) {
background-color: #faf4e2;
}
</style>
<script type="text/javascript" src="http://ift.tt/1Jna9vQ"></script>
<script type="text/javascript" src="http://ift.tt/1OYEx6u"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#myTable").tablesorter();
}
);
</script>
</head>
<body>
<table id="myTable" class="tablesorter">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Saul</td>
<td>Tarsus</td>
<td>st@mail.com</td>
</tr>
<tr>
<td>Paul</td>
<td>Rock</td>
<td>pr@mail.com</td>
</tr>
</tbody>
</table>
</body>
</html>
I'm trying to translate an svg graphic in the y-axis with CSS transforms. I'm having no problem with the translate part:
transform: translate3d(0, -100px, 0);
BUT, the 100px up in the Y direction moves the svg graphic behind the parent div. I've tried putting different z-index on the various elements but can't get the svg graphic to be in front.
Here's images to show you want I mean:
And after the translate:
transform: translate3d(0, -100px, 0);
I have 2 problems:
HTML
<span class="icon-twitter-circle"></span> Follow us</br>
<span class="icon-facebook-circle"></span> Like us
CSS
[class^=icon] {
font-family: Arial, Helvetica, Tahoma, Verdana, "Courier New", "Times New Roman", sans-serif;
/* UNICODE only! No custom font files. No images */
}
[class^=icon-facebook]:before {
content: "\024D5";
content: "\00066";
color: #0000FF;
font-size: 1.5em;
font-weight: bold;
}
[class^=icon-twitter]:before {
content: "\01F426";
color: #3366FF;
font-size: 1em;
transform: scale(-1, 1); /* Flips the text */
}
[class$=-circle] {
display: inline-block;
height: 20px;
width: 20px;
border-radius: 50%;
padding: 0.30em; /* Size of circle */
margin: 0.10em 0.0em; /* Line spacing */
border: 1px solid #000;
line-height: 20px; /* Centers the character Horizontally, on it's Y-axis */
text-align: center; /* Centers the character vertically, on it's X-axis */
}
[class^=icon-twitter]:hover {
color: #fff;
background-color: #3366FF;
}
[class^=icon-facebook]:hover {
color: #fff;
background-color: #0000FF;
}
I have All in one SEO and Social Share button plugin on my WordPress website but when I click on share on Facebook the image it is pulling is some default user image instead the featured image.
this is my website post link http://ift.tt/1dLAz0q
Can any one help me?
I'm using Bootstrap for the first time. My design needs to have a minimum width of 400px. When I load the page on a device with a narrower width (my Nexus 5 has a width of 360px), it overflows the viewport, and horizontal scrolling is needed to view the content. I would like it to be automatically scaled to fit the viewport. How can I accomplish this?
I have it where on outside click the sub-menu will be set to display: none but the sub-menu fails to reappear when hovering over the parent menu after it is hidden the first time. Is there a way to keep the JavaScript from setting the display to a permanent none state for the sub-menu? I have attempted to a JavaScript function to use the CSS selector for the :hover which opens the menu but it didn't work. Help?
Full HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="mobile.css">
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="search.css">
<link rel="stylesheet" type="text/css" href="featured_articles.css">
<link rel="stylesheet" type="text/css" href="featured_news.css">
<link rel="webpages" type="text/http" href="html/">
<link rel="icon" type="image/png" href="images/favicon.png">
<title>Webster Running</title>
<nav id="main_nav">
<a id="logo" href="http://ift.tt/1PnfNjk"><img src="images/logo.png" /></a>
<div id="menu">
<ul>
<li>
<a href="#">articles</a>
<div class="submenu">
<ul>
<li><a href="#">diet</a><div class="featured_articles" id="featured_diet"></div></li>
<li><a href="#">history</a><div class="featured_articles" id="featured_history"></div></li>
<li><a href="#">injuries</a><div class="featured_articles" id="featured_injuries"></div></li>
<li><a href="#">philosophies</a><div class="featured_articles" id="featured_philosophies"></div></li>
<li><a href="#">physiology</a><div class="featured_articles" id="featured_physiology"></div></li>
<li><a href="#">records</a><div class="featured_articles" id="featured_records"></div></li>
<li><a href="#">schedules</a><div class="featured_articles" id="featured_schedules"></div></li>
<li><a href="#">training</a><div class="featured_articles" id="featured_training"></div></li>
</ul>
</div>
</li>
<li>
<a href="#">running news</a>
<div class="submenu">
<ul>
<li><a href="#">youth</a><div class="featured_news" id="featured_youth"></div></li>
<li><a href="#">high school</a><div class="featured_news" id="featured_highschool"></div></li>
<li><a href="#">collegiate</a><div class="featured_news" id="featured_collegiate"></div></li>
<li><a href="#">professional</a><div class="featured_news" id="featured_professional"></div></li>
<li><a href="#">masters</a><div class="featured_news" id="featured_masters"></div></li>
<li><a href="#">ultra</a><div class="featured_news" id="featured_ultra"></div></li>
<li><a href="#">trail</a><div class="featured_news" id="featured_trail"></div></li>
</ul>
</div>
</li>
<li><a href="#">coaching</a></li>
<li>
<a href="#">about</a>
<div class="submenu">
<ul>
<li><a href="#">me</a></li>
<li><a href="#">training logs</a></li>
<li><a href="#">contact</a></li>
</ul>
</div>
</li>
</ul>
</div>
<p id="p1">[webster running]</p>
<script>
document.onclick = closeMenu;
function parentIsSubmenu(child) {
var node = child.parentNode;
while (node != null) {
if ((node.className || '').indexOf('submenu') > -1) {
return true;
}
node = node.parentNode;
}
return false;
}
function closeMenu(event) {
if(!parentIsSubmenu(event.target)) {
var submenus = document.getElementsByClassName("submenu");
for(var i = 0; i < submenus.length; i++) {
submenus[i].style.display = 'none';
}
}
}
document.querySelector('#main_nav ul li:hover > .submenu ul').onclick = function(){
var submenus = document.getElementsByClassName("submenu");
for(var i = 0; i < submenus.length; i++) {
submenus[i].style.display = 'block';
}
};
</script>
</nav>
</head>
<body>
<div id="search">
<script>
(function() {
var cx = '005801732664854206753:wfzklpxxjoa';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search></gcse:search>
</div>
</body>
Main CSS:
#main_nav {}
#logo {
float: left
}
#main_nav ul {
display: inline-block;
position: absolute;
list-style: none;
width: 220px
}
#main_nav ul a {
display: block;
padding-left: 18px;
padding-right: 10px;
color: black;
text-decoration: none;
font-size: 26px;
line-height: 36px;
font-family: Helvetica
}
#main_nav ul li {
position: relative;
border-left: solid red .5px
}
#main_nav ul li:hover > a {
background: black;
color: white;
border-radius: 7px;
margin-left: 15%
}
#main_nav ul li:hover > .submenu ul {
display: block
}
#main_nav ul ul {
display: none;
position: absolute;
left: 83%;
top: 0px;
width: 65%;
margin-left: 6%;
background: none
}
#main_nav ul ul a {
line-height: 100%;
font-size: 18px;
padding: 8px
}
#p1 {
position: absolute;
left: 28px;
top: 165px;
font-family: Helvetica;
font-size: 18px
}
I am forming the div dynamically on document load like below. I have a ajax call and on response fro the AJAXcall I want to replace the value 'right' with the value from the AJAX call using jQuery.
Basically I want to replace the value for the text div mentioned below once AJAX has the success data.
var beginContainer = '<div class="container">';
var endDiv = '</div>';
var beginInner = '<div class="inner">';
var text = '<div class="text" id=3 style="color:#0000FF" align ="center">';
var append = beginContainer + beginInner + text + 'Number of sensors' + endDiv + text + '10cents/sensor' + endDiv + endDiv + beginInner + text +'right'+endDiv +endDiv;
$('#content').append(append);
var beginContainer = '<div class="container">';
var endDiv = '</div>';
var beginInner = '<div class="inner">';
var text = '<div class="text" id=4 style="color:#0000FF" align ="center" value="kkk">';
var append = beginContainer + beginInner + text + 'Total Bill' + endDiv + text + 'Month-to-Month' + endDiv + endDiv + beginInner + text +'right'+endDiv +endDiv;
$('#content').append(append);
I have recently made my website responsive, it is a joomla site, and on the mobile version anywhere that I have a form, when you type in the text you can barely see it because of the color. I have been playing around in the css trying to add color to it but to no avail. Could you please help me crack this thing, it is driving me nuts and several people that have tried using the form have complained about it. The website is http://ift.tt/KDT9s6 and the online giving is an example of where it does this. Thank you a bunch!
I'm learning wordpress and I have created a simple template using basic HTML/CSS.
Everything works so far but I cannot figure out how to display the Page's Tabs that I created from my wp admin panel on my header.php.
my current static HTML code for the tabs looks like this:
<div id="profile-navigation" class="navbar profile-navigation">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li><a href="">Home</a></li>
<li><a href="">Blog/a></li>
</ul>
</div>
</div>
</div>
and I tried to do this:
<ul class="nav">
<li>
<a href="">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</a>
</li>
</ul>
but that doesn't really make sense and even though it displays the Pages Tabs successfully, they have no style and they are all over the place on my page!
Could someone please offer me some advice on this issue?
Thanks in advance
I'm not quite sure how to word this out, but I am trying to use sass variables in my Jekyll site. Specifically, I'm trying to use the variable, "$color__background-body". When I set that as my background color, I get this error message: "Error: Undefined variable: "$color__background-body". on line 6 Error: Run Jekyll build --trace for more information."
and my variables wont show up on "my _site/css/main.css". Is it just not possible to use color variables for Jekyll?
Using jquery, I'm trying to copy each "price" div after each "title" div.
<table>
<tr>
<td><div class="title">Item Title 1</div></td>
<td><div class="price">$99.99</div></td>
<tr>
<tr>
<td><div class="title">Item Title 2</div></td>
<td><div class="price">$89.99</div></td>
<tr>
<tr>
<td><div class="title">Item Title 3</div></td>
<td><div class="price">$79.99</div></td>
<tr>
</table>
So it would look like this:
<table>
<tr>
<td><div class="title">Item Title 1</div><div class="price">$99.99</div></td>
<td><div class="price">$99.99</div></td>
<tr>
<tr>
<td><div class="title">Item Title 2</div><div class="price">$89.99</div></td>
<td><div class="price">$89.99</div></td>
<tr>
<tr>
<td><div class="title">Item Title 3</div><div class="price">$79.99</div></td>
<td><div class="price">$79.99</div></td>
<tr>
</table>
I've tried using the jquery script:
$(".price").each(function(){
var newLink = $(this).clone();
$(newLink).insertAfter('.title');
});
That doesn't work - it just takes every price and appends it to each title (so you end up with 3 prices per title, in other words).
Does anyone have any ideas?
I'm trying to make a mini web app but having some issue with Jquery UI Slider
Right so I have one slider that has a range of 0 to 100% and I have a button that add's new sliders so you can have one or many sliders with a maximum of 10 sliders.
the problem im having is I dont want the sliders to ever have a maximum combined range of 100%.
So if I add a new slider they will both sit at 50% each and if I increase the first slider to say 75% the second slider will drop to 25%.
Its melting my head so hopefully someone can help out thanks all.
I have some <pre> blocks.
Would it be possible, using just CSS, to highlight single lines when hovering over them?
== Update ==
Here is some sample code:
<pre>
#include <stdio.h>
int main()
{
printf("Hello World");
return 0;
}
</pre>
When lines become longer it would be useful to have them highlighted when hovering.
The source file can't be read via PHP, or I'd split it into separate <pre> lines, with a trivial pre:hover CSS.
pre:nth-child is not a solution, because code lines are not "children" in the CSS sense.
pre:first-line works, but of course just for the first line.
== Update 2 ==
Since CSS seems to be limited to first-line, and thanks to Zeke suggestion, I found an almost simple way to have what I want.
HTML:
<pre id="raw">
#include <stdio.h>
int main()
{
printf("Hello World");
return 0;
}
</pre>
<!-- 1×1 transparent PNG for the onload -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP4/x8AAwAB/2+Bq7YAAAAASUVORK5CYII=" onload="PreHover()" />
CSS:
#pre div:hover {
background: #ff0;
}
Vanilla Javascript:
function PreHover() {
var output = '';
var preBox = document.getElementById('raw');
var txt = preBox.innerHTML.split('\n');
for(var x=0;x<txt.length-1;x++) {
output = output + '<div>'+txt[x]+'</div>';
}
preBox.innerHTML = output;
}
When implementing an SVG sprite, an <svg> element is created and svg elements are referenced via the <use> element. The containing <svg> element is then hidden using style="display: none;"
The clip-Path attribute does not render, but the path does. This leaves my path looking different from how I want it to.
How do I use an svg <use xlink:href="#"/> referencing an element with clip-path?
I used grunt-svg-store to create my svg sprite, but have simplified this example for Q&A format http://ift.tt/1zEIoIv
<svg id="svg-test" style="display: none;">
<clipPath id="my-clip-1">
<circle id="circle-1" cx="50" cy="50" r="50" />
</clipPath>
<path id="svg-test-reference" clip-path="url(#my-clip-1)" d="M10-39.288h80v80H10z" />
</svg>
<!-- Reference SVG <path> by ID with Use -->
<svg class="svg-item" viewBox="0 0 100 100">
<use xlink:href="#svg-test-reference" />
</svg>
<!DOCTYPE HTML>
<html>
<body>
<head>
<meta charset="utf-8">
<title>Don't Pick the King!</title>
<table style="width:50%">
<tr>
<td><img src="cards/b.gif" Class="back" id="card_0" onClick="flipCard(0);"></td>
<td><img src="cards/b.gif" Class="back" id="card_1" onClick="flipCard(1);"></td>
<td><img src="cards/b.gif" Class="back" id="card_2" onClick="flipCard(2);"></td>
</tr>
<tr>
<td><img src="cards/b.gif" Class="back" id="card_3" onClick="flipCard(3);"></td>
<td><img src="cards/b.gif" Class="back" id="card_4" onClick="flipCard(4);"></td>
<td><img src="cards/b.gif" Class="back" id="card_5" onClick="flipCard(5);"></td>
</tr>
<tr>
<td><img src="cards/b.gif" Class="back" id="card_6" onClick="flipCard(6);"></td>
<td><img src="cards/b.gif" Class="back" id="card_7" onClick="flipCard(7);"></td>
<td><img src="cards/b.gif" Class="back" id="card_8" onClick="flipCard(8);"></td>
</tr>
<tr>
<td><img src="cards/b.gif" Class="back" id="card_9" onClick="flipCard(9);"></td>
<td><img src="cards/b.gif" Class="back" id="card_10" onClick="flipCard(10);"></td>
<td><img src="cards/b.gif" Class="back" id="card_11" onClick="flipCard(11);"></td>
</tr>
</table>
<p id="score" style="float:center">Pick a card but do not pick a king.</p>
<style>
* {
background-color: lightblue;
border-color: hsla(173,100%,50%,1.00);
font-weight: bold;
}
.back
{width:100px;
height:100px;
}
</style>
<script language="JavaScript">
/*ID of each card 0,1,2
3,4,5,
6,7,8,
9,10,11 ---12 cards 0 being the 1st and 12th being the 13th card*/
var deck = ["cards/c11.gif","cards/c12.gif","cards/d11.gif","cards/d12.gif","cards/h11.gif",
"cards/h12.gif","cards/s11.gif","cards/s12.gif","cards/c13.gif", "cards/d13.gif", "cards/h13.gif", "cards/s13.gif"];
deck(1,0);
function shuffle(deck){
for(swaps=0; swaps<12; swaps++){
shuffle1=Math.floor(Math.random()*deck.length);
shuffle2=Math.floor(Math.random()*deck.length);
temp=deck[shuffle1];
deck[shuffle1]=deck[shuffle2];
deck[shuffle2]=temp;
}
}
function onLoad(){
shuffle(deck)
}
function flipCard(card){
onLoad();
selection=card;
document.images[card].src=deck[card];
}
/*function randomPick(){
var rand = Math.random();
var randAdjusted = rand * itemArray.length;
var index = Math.floor(randAdjusted);
var item = itemArray[index];
outText.innerHTML += "<b>Rand:</b> " + rand + " <b>Adjusted:</b> " + randAdjusted + " <b>Index:</b> "+ index + " <b>Item:</b> " + item + "<br>";
</script>
</body>
</html>
hi so my program seems to want to allow me to click the grid and find a card from the array however it wont remove elements from the array so i can end up with 5 jacks for example. I only want the program to allow for 4 suits per card to show up when one card is pressed within the grid. How would I go about doing this? Thanks very much for your help in advance.
The below code should fade in and out. What am I doing wrong?
$(window).scroll(function(){
if ($(window).scrollTop() > 910){
$('#logopiano').stop(true, true).fadeIn("slow", function() {
$(this).show().css({ visibility: "visible" });
});
} else {
$('#logopiano').stop(true, true).fadeOut("slow", function() {
$(this).show().css({ visibility: "hidden" });
});
}
});
Here's the page: http://ift.tt/1zywkii
I am using Legacy Bootstrap 2.3 and I am having some trouble getting some CSS to work correctly.
Here is my panel and inside it, I have a table. I am trying to get that table to be full width of the panel body (no padding). I have tried removing the panel body as well as adding a padding: 0px on pannel-body but neither of those seem to work.
How can I make a special class for this panel to have the table span full width of the panel-body but not effect other panels on the page?
<div class="panel">
<div class="panel-heading"> <span class="panel-title"><small>Details</small></span>
</div>
<div class="panel-body">
<table class="table">
<tbody>
<tr class="success">
<td>1</td>
<td>TB - Monthly</td>
<td>01/04/2012</td>
<td>Approved</td>
</tr>
<tr class="error">
<td>2</td>
<td>TB - Monthly</td>
<td>02/04/2012</td>
<td>Declined</td>
</tr>
</tbody>
</table>
</div>
Fiddle: http://ift.tt/1zywma0
Ok, so I display some svg using external svg files in which I have some style as follows :
<style type="text/css">
<![CDATA[
.st1 {fill:#ffffff;stroke:#808080;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.5;stroke-width:0.75}
.st2 {fill:#444444;font-family:Calibri;font-size:0.833336em;font-weight:bold}
.st3 {fill:#f8eccc;stroke:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.75}
.st4 {fill:#444444;font-family:Calibri;font-size:0.75em;font-weight:bold}
]]>
</style>
I want to add some style using javascript doing like this :
console.log("style innerHTML before :\n" + document.querySelector(elementOrSelector).contentDocument.querySelector("style").innerHTML);
var styleContent = document.querySelector(elementOrSelector).contentDocument.querySelector("style").innerHTML;
styleContent = styleContent.slice(0, styleContent.lastIndexOf("}") + 1) + "\n\t\trect:hover {fill:#698B89}\n\t]]>\n";
document.querySelector(elementOrSelector).contentDocument.querySelector("style").innerHTML = styleContent;
console.log("style innerHTML after :\n" + document.querySelector(elementOrSelector).contentDocument.querySelector("style").innerHTML);
It works fine in Firefox, my console shows for the inner HTML after modification :
<![CDATA[
.st1 {fill:#ffffff;stroke:#808080;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.5;stroke-width:0.75}
.st2 {fill:#444444;font-family:Calibri;font-size:0.833336em;font-weight:bold}
.st3 {fill:#f8eccc;stroke:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.75}
.st4 {fill:#444444;font-family:Calibri;font-size:0.75em;font-weight:bold}
rect:hover {fill:#698B89}
]]>
But in Chrome it fails badly, the console shows :
<![CDATA[
.st1 {fill:#ffffff;stroke:#808080;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.5;stroke-width:0.75}
.st2 {fill:#444444;font-family:Calibri;font-size:0.833336em;font-weight:bold}
.st3 {fill:#f8eccc;stroke:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.75}
.st4 {fill:#444444;font-family:Calibri;font-size:0.75em;font-weight:bold}
rect:hover {fill:#698B89}
]]>
so my <and > are not set properly, I have the < and > entities instead, and this in Chrome only.
I am creating a Kanbanize app and have cards on my webpage which displays the title and description.Clicking on the card, I want to display both title and description and the Planned start and finish date as selected by the user during card creation.
Here is my html:
<a href="#" data-toggle="modal" data-target="#newModal" data-whatever="EditCard" style="color:darkred;">
<div data-id="<%= tablelist[i].NC_TITLE %>" class="open-AddCardTitle" style="text-align: center; background-color: burlywood;" name="title" ><%= tablelist[i].NC_TITLE %></div>
<div data-id="<%= tablelist[i].NC_DESC %>" class="open-AddCardDesc" style="text-align: center; height: 50px;" name="desc"><%= tablelist[i].NC_DESC %></div>
</a>
<!-- Modal- Edit Card -->
<div class="modal fade" id="newModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Update Card</h4>
</div>
<form action="editcard" method="post" id="editcard" class="form-horizontal" role="form">
<div class="modal-body" style="height: 230px;">
<div class="form-group">
<label for="title" class="col-md-3 control-label">Title</label>
<div class="col-md-9">
<input type="text" class="form-control" id="title" name="title" value=""/>
</div>
</div>
<div class="form-group">
<label for="title" class="col-md-3 control-label">Description</label>
<div class="col-md-9">
<textarea class="form-control" id="desc" name="desc" value=""></textarea>
</div>
</div>
<div class="form-group">
<label for="priority" class="col-md-3 control-label">Date Range</label>
<div class="col-md-4">
<input type="text" id="datepicker2" name="startdate" Placeholder="Planned Start Date...">
</div>
<div class="col-md-4">
<input type="text" id="datepicker3" name="finishdate" Placeholder="Planned Finish Date...">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Update Card</button>
</div>
</form>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Javascript:
<script>
$(document).on("click", ".open-AddCardTitle", function () {
var title = $(this).data('id');
$(".modal-body #title").val( title );
});
$(document).on("click", ".open-AddCardDesc", function () {
var desc = $(this).data('id');
$(".modal-body #desc").val( desc );
});
</script>
Please let me know how I can get both title and desc on the same click, instead of clicking on both div's separately. Thanks.
Sorry for this newbie question, i'm looping my db to get the list of my categories
foreach($cats as $cat) {
echo "<li><a href=\"/?page=catalogue&category=".$cat['id']."\"";
echo Helper::getActive(array('category' => $cat['id']));
echo ">";
echo Helper::encodeHtml($cat['name']);
echo "</a></li>";
and the list displayed Horizontal, how can i display it inline? in css i would just have done: display: inline;
I was working on a couple of Chart.js charts and have found some strange behavior.
In this fiddle: http://ift.tt/1GXDooM people have been getting a variety of side effects when pressing the buttons "Day", "Week", or "Month".
What it should do: Simply refresh the chart with potentially new information displayed(the pie and doughnut actually don't have anything new)
What it should not do: As a side effect for some, it is growing the size of the <canvas> on each click. It does it for me. But it doesn't do it for a lot of other people accessing this fiddle. Here is a screen shot:
Why is it doing this for some people and not others? How can I remedy this problem? If you are curios, I initially asked a question about something else about these charts, but this could be somewhat related.
Any clue what could be causing this in my browser and other browsers/computers?
I have a slideshow that is almost perfect in fitting my needs. I just need to change a couple of things:
Thanks!
I have the code here:
$(window).load(function() { //start after HTML, images have loaded
var InfiniteRotator = {
init: function() {
//initial fade-in time (in milliseconds)
var initialFadeIn = 1000;
//interval between items (in milliseconds)
var itemInterval = 5000;
//cross-fade time (in milliseconds)
var fadeTime = 2500;
//count number of items
var numberOfItems = $('.rotating-item').length;
//set current item
var currentItem = 0;
//show first item
$('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);
//loop through the items
var infiniteLoop = setInterval(function() {
$('.rotating-item').eq(currentItem).fadeOut(fadeTime);
if (currentItem == numberOfItems - 1) {
currentItem = 0;
} else {
currentItem++;
}
$('.rotating-item').eq(currentItem).fadeIn(fadeTime);
}, itemInterval);
}
};
InfiniteRotator.init();
});
Html code:
<div id="rotating-item-wrapper">
<img src="images/slider/1.jpg" class="rotating-item" />
<img src="images/slider/2.jpg" class="rotating-item" />
<img src="images/slider/3.jpg" class="rotating-item" />
</div>
I need an approach. I'm new on web development. Sorry.
We need to show data from a mysql table on a grid-table.
We will use that grid to be able to select multiples rows and then update a column of the selected rows on the database.
I am testing bootstrap and looks nice but i don't know if it's enough for our problem.
Anyone could help us?
Regards