I got a little codepen which I am working on. And there is just a random margin after an input field. I set
*{
margin: 0;
padding: 0;
}
, so that shouldn't be the reason. Additionally the css of the both input fields:
#plannername{
width:40%;
background-color:#9eefbc;
margin-left:20%;
border:0;
font-size:2em;
padding:20px;
}
#plannersubmit{
width:17%;
background-color:#6dce91;
border:0;
font-size:2em;
padding:20px;
}
As you can see there is not margin, except the margin-left: 20% of the #plannername. But that shouldn't affect that little margin on the right of it/on the left of the submit button.
What could be causing this little margin???
If you press Ctrl + A you see that it's actually not a margin but a single space.
Here's a great article about it and how to get rid of it: https://css-tricks.com/fighting-the-space-between-inline-block-elements/
Related
So I'm trying to dynamically append a bunch of div elements containing words to my page (each has the .magnet class). However, many of them end up spilling outside the boundaries of the container, and I cannot figure out how to stop that from happening. If anyone could take a look at my jsfiddle and help me out, I would be very appreciative. I've also included my css code for the container below.
JsFiddle Example
body {
margin:0 auto;
overflow:hidden;
}
#container {
background-color: #446b81;
}
.magnet {
width:45px;
background-color: #FFFFFF;
padding:5px 25px;
font-family: Times;
font-size: 16px;
border:1px outset;
position:absolute;
}
Why don't you reduce the document width and height by some values? (50 and 100 are just random numbers but you can fix them with the exact size of the divs).
testsub.css("top",Math.floor(Math.random() * ($(document).height()-50)));
testsub.css("left",Math.floor(Math.random() * ($(document).width()-100)));
Updated fiddle: https://jsfiddle.net/mszvbfoe/5/
Put overflow:hidden; inside your container and fix the width for your container
#container
{
background-color: #446b81;
overflow:hidden;
width:500px;
}
I have a text on my website that scrolls horizontal through the page. I’m trying to get around 8 characters highlighted in black, while the rest is grey. But those characters are meant to vary as you scroll though, the highlighted bit should remain in place.
In case this doesn’t make any sense, if grey was an x, it should look something like this:
xxxxx xpsum dolox xxx xxxx
xxxx xxsum dolox sxx xxxx
xxx xxxum dolox six xxxx x
xx xxxxm dolox sit xxxx xx
I’m trying to get this done in jQuery, but I can’t get it to work. I also like to say that I’m not at all an expert in webdesign, so I don’t know what I’m doing. Anyway, I’ve tried two different approaches, one is to say “change colour of text when going over an underlying div”. The other approach is to change the colour of the text depending on the scrolling position, but the problem here is that it takes the scrolling position of the whole div, instead of a fixed position on the page. Both don’t work at the moment, examples are here:
jsfiddle 9p29tz2f
jsfiddle 9p29tz2f/1
If anyone has any ideas how to approach this, or needs some more clarification, please let me know. Many thanks!
Clone the text and set it as a child of the overlay box then scroll them together:
$(function(){
var $bodytext = $('#bodytext'),
$clone = $bodytext.clone();
//copy the text and append it to #black:
$clone.attr("id","clone").prependTo("#black");
//scroll #clone with #bodytext:
$bodytext.scroll(function(){
$clone.scrollLeft($bodytext.scrollLeft());
});
});
http://jsfiddle.net/9p29tz2f/2/
I've taken Teemu's solution and modified it a bit: http://jsfiddle.net/9af91wcL/2/
The important bits: The code moves a white DIV (#grey-overlay) on top of the text and makes it transparent. By adding black and white pixels, you get grey. The grey level is determined by the alpha channel (0.7 in the rgba() function).
You need to assign a height or it will look odd. I use 1.5em to make sure it doesn't overlap with the scroll bar of the #bodytext div.
Also make sure that the top/left position of both div's is the same.
In your real code, you can make the horizontal scrollbar disappear and scroll with JavaScript.
HTML
<div id="grey-overlay"></div>
<div id="bodytext">text...</div>
CSS
body {
background: #ffffff;
color: #000000;
font-family: sans-serif;
font-size: 200%;
}
#bodytext {
top: 15%;
width:200px;
height: 2em;
padding: 0;
position:absolute;
overflow-x:scroll;
overflow-y:hidden;
white-space: nowrap;
}
#grey-overlay {
background-color: rgba(255, 255, 255, 0.7);
width:40px;
height: 1.5em;
top:15%;
position:fixed;
z-index: 10;
}
You need to show the same content within #black as in #bodytext, and synchronize its position relative to #bodytext scrolling. This can be achieved by using an extra wrapper around #black. Something like this:
CSS:
#cover {
top: 15%;
height:50%;
width: 120px;
padding: 0;
position:fixed;
overflow-x: hidden;
background-color: #D8D8D8;
}
#black {
color: #000000;
width:100%;
height:100%;
top:0px;
left: 0px;
position:absolute;
white-space: nowrap;
z-index: 10;
}
#bodytext {
top: 15%;
width:100%;
height:85%;
padding: 0;
position:absolute;
overflow-x:scroll;
white-space: nowrap;
color: #D8D8D8;
}
HTML:
<div id="cover">
<div id="black"></div>
</div>
JS:
$(document).ready(function () {
var black = $('#black'),
btext = $('#bodytext');
black.text(btext.text()); // Clone the content
btext.scroll(function () {
var pos = btext.scrollLeft();
black.css('left', -pos + 'px'); // Set the position to match #bodytext
});
});
A live demo at jsFiddle.
Notice, that if you need some left margin, it has also to be "calculated in" to pos.
I have an alert box with text inside, but I can't think of any ways to move the text down within the alert box div, vertically centering it. I've tried line-height but that of course will not work for the two lines of text that I have when you view it on a browser with a min-width of 320px and max 480px. #alertmsg should remain at the top, however, the text within it should be centered when viewed on a mobile browser. I've also tried Vertical-align, but that doesnt work either. Does anyone have any suggestions?
Any help would be greatly appreciated. I also tried to place a <p> in the JavaScript; no luck.
Here is my CSS:
#alertmsg {
position:absolute;
background-color:#252525;
top:0px;
padding-left:0px;
width:100%;
font-family:'gotham-medium', arial, sans-serif;
src:url("http://www.3elementsreview.com/fonts/gotham-light.ttf");
font-style:normal;
font-weight:normal;
font-size:1.2em;
line-height:1.2em;
text-align:center;
height:63px;
color:#ffffff;
opacity:1;
display:inline-block;
overflow:hidden;
z-index:1000;
border-bottom:2px solid #ff6000;
}
And my JavaScript:
$(document).ready(function() {
if (typeof window.sessionStorage != undefined) {
if (!sessionStorage.getItem('mySessionVal')) {
$('<div />', {
id : "alertmsg",
text :"Join our email list and receive the latest updates at 3Elements Review.",
on : {
click: function() {
$(this).slideUp(200);
}
}
}).appendTo('body').fadeIn(1).delay(6000).fadeOut("slow");
sessionStorage.setItem('mySessionVal', true);
sessionStorage.setItem('storedWhen', (new Date()).getTime());
}
}
});
You could use
#alertmsg {
position:absolute;
top: 50%;
height:63px;
margin-top: -31.5px; /* half height */
}
Demo
I have been working with a script by Scripterlative called CursorDivScroll, which scrolls the content of a div based on the cursor position. In my case, I want to scroll content vertically from the right side of the div; not a continuous scroll, but movement that goes a little and then stops so the user has some control. I'm having problems getting the script to work and wondered if anyone knew of a better solution? The script I have uses cursordivscroll.js and this script, which is placed just beneath my div.
<script type='text/javascript' >
$(document).ready(function() {
CursorDivScroll( 'repertoiredetails', 40, 10 ).noHorizontal();
});
</script>
Thanks for any help in advance.
<div id="repertoiredetails">
<p>content</p>
</div><!-- close repertoiredetails-->
#repertoiredetails {
background-color:#000;
width:400px;
opacity:0.7; filter:alpha(opacity=70);
margin-top:140px;
float:left;
height:auto;
display:none;
margin-left:-2px;
padding-top:5px;
border-radius:5px;
-moz-border-radius:5px; /* Firefox 3.6 and earlier */
z-index:999;
}
#repertoiredetails {
cursor: url(../images/arrow.png), auto;
position:relative;
}
#repertoiredetails p {
text-align:justify;
text-justify:inter-word;
color:#999;
font-family:'Arial Narrow', Arial, sans-serif;
font-size:13px;
width:400px;
padding:20px;
}
Don't know why the noHorizontal() is not working, but with a few changes in your CSS you can make it work.
a Fiddle example: http://jsfiddle.net/M4AXB/1/
Good Luck!
I have a simple list as follows:
<div class="settingButton">
<div class="subManu">
<ul>
<li><a onclick="alert('clicked!!')" href="#">Default Categories</a></li>
<li><a onclick="alert('clicked!!')" href="#">Wizard</a></li>
<div class="clear"></div>
</ul>
<div class="clear"></div>
</div>
</div>
I do not see the alerts on clicking the links! It works fine in Chrome, but not in IE and FF. I used this same structure without assigning class and it works as expected. Maybe the problem is with the CSS, but I am not sure what. Here is the CSS for the dropdown,
.settingButton {
background:url(/mobiledoc/jsp/dashboard/images/settings.png) 0 0 no-repeat;
width:25px;
height:37px;
float:left;
position:absolute;
right:13px;
top:-30px;
}
.settingButton a {
display:block;
width:25px;
height:37px;
}
.settingButton:hover {
background:url(/mobiledoc/jsp/dashboard/images/settingsHover.png) 0 0 no-repeat;
}
.settingButton:active {
background:url(/mobiledoc/jsp/dashboard/images/settingsActive.png) 0 0 no-repeat;
}
.settingButton div.subManu {
display:none;
height:100px;
}
.settingButton:hover div.subManu {
background:url(/mobiledoc/jsp/dashboard/images/subNavArrow.png) no-repeat right 3px;
position:absolute;
top:20px;
z-index:99;
right:0;
width:250px;
height:50px;
display:block;
padding:13px 0 0 0;
}
div.subManu ul {
display:block;
background:url(/mobiledoc/jsp/dashboard/images/dropDownMidBg.png) repeat-x;
border-left:#547b9a 1px solid;
border-right:#547b9a 1px solid;
height:29px;
padding:0 0 0 7px;
}
div.subManu ul li {
width:110px;
float:left;
margin:0 5px;
display:block;
height:29px;
}
div.subManu ul li a {
display:inline;
color:#ffffff;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:normal;
line-height:28px;
}
div.subManu ul li a:hover {
color:#b7f630;
}
div.subManu ul li.active-manu a {
color:#b7f630;
}
I have gone through different question but didn't find any relevant answers. Let me know if you need any more info.
Thanks!
If you don't want a link, don't use an A element, use a button or styled span instead, e.g.
<style type="text/css">
.clickable:hover {
text-decoration: underline;
cursor: pointer;
}
</style>
...
<span class="clickable">thing to click</span>
Anyhow, the preferred method for links is:
<a href="http://link for script-disabled browsers"
onclick="myFunction(); return false;">...</a>
Reference: jsFiddle
You will notice I only made two changes to your code.
The first change is to include background color for the hover div.
The second change is to make the font words viewable on the white background since the font's are white themselves.
To see both click events working, hover over the black rectangle in the top right corner and you will see the two links that will pop up and allow the alert to invoke when clicked.
The bottom line is there is nothing wrong with your code, it's just you need to hover to access the clickable links.
Disclaimer: It's for the Question only and doesn't cover other things like the preferred method for anchor links. ;-)
You might want to try something like this instead:
Default Categories