Apply CSS to a generated href - javascript

I am generating links from a java script to created a breadcrumb for my sight. It works perfectly, but.... I want to put all the link in a line like this,
.a
{
display: inline;
float : left;
font: 18px Helvetica, Arial, Sans-Serif;
}
but I don't know where to put the css to make it pretty.
Here is the javascript that is inside the body of the html;
<SCRIPT LANGUAGE="JavaScript">
<!--
var path = "";
var href = document.location.href;
var s = href.split("/");
for (var i=2;i<(s.length-1);i++) {
path+=""+s[i]+" \>\> ";
}
i=s.length-1;
path+=""+s[i]+"";
var url = path;
document.write(url);
//-->
</script>
Right now the links are one on top of each other with the >> at the left side of the page.
I want them to be inline horizontally with the >> in-between them.

Your css should be:
a
{
display: inline-block;
font: 18px Helvetica, Arial, Sans-Serif;
}
You are calling .a class instead of a
You don't need to use float: left for this case

Related

Including style tag in javascript

I want to include style tag in the javascript. ie., I am printing notices and the number of notices change dynamically. I receive the notices in a JSON object and hence require styles to be applied to each notice separately.
For now I just want the border around each notice or text
function retrive()
{
/*var css = ' { border :2px dashed; }',
head = document.head || document.getElementsByTagName('head')[0],
style = document.createElement('style');
style.type = 'text/css'; Not working*/
var myObj = JSON.parse(localStorage.getItem("Notice"));
if(myObj.length == 0)
{
$('#title').append(
'<br><br>Currently There are no Notices to be displayed'
);
}
else
{
for(var i = 0; i < myObj.length; i++)
{
$('#heading').append(
'<br><br><strong><center>'+ myObj[i].title+'</center></strong><br>'+myObj[i].introtext
);
}
}
}
I am printing the notices in the else block using for loop by finding the object length and appending it to the heading. This is where I want to print border to be printed around each block
<div>
<ul id="heading" style = "font-size : 16px;">
</ul>
</div>
If I use style here, border is appears to whole block or a single border to all notices.
<div>
<ul id="heading" style = "font-size : 16px; border : 2px dashed">
</ul>
</div>
,which is obvious.
Thanks.
I believe that you could handle this entirely with CSS and applicable classes. If you need to make changes based on the number of items, you could define classes for the different sets of count values that would result in the same CSS settings and simply apply that class to the header. Based on what you have in your code, that doesn't look to be the case and the example below should approximate what you're trying to achieve.
Note: I'm assuming that you're using a standard CSS reset to remove list styles. If not, then I suggest that you should.
<style>
#title p {
padding-top: 1em;
}
#heading {
font-size: 16px;
}
#heading li {
border: 2px dashed;
}
#heading li span.item_title {
font-weight: bold;
display: block;
text-align: center;
}
#heading li span.item_text {
display: block;
}
</style>
function retrive()
{
var myObj = JSON.parse(localStorage.getItem("Notice"));
if(myObj.length == 0)
{
$('#title').append('<p>Currently There are no Notices to be displayed</p>' );
}
else
{
for(var i = 0; i < myObj.length; i++)
{
$('#heading').append('<li><span class="item_title">'+ myObj[i].title+'</span><span class="item_text"'+myObj[i].introtext+ "</span></li>" );
}
}
}
If you use CSS classes you will be able to change the design more easily later, by modifying the CSS, rather than the JavaScript and HTML.
<style>
.heading
{ font-size : 16px; border : 2px dashed; }
</style>
<div>
<ul id="heading" class="heading">
...
</ul>
</div>
You can put the HTML in your JavaScript as you already have it, and use as many classes as you need.
In addition, try to avoid using <strong> and <br> and use CSS to control the layout.
You can apply a css style to each notice inside of #heading.
Something like this should work fine (place this in your css file or inside of a style tag) :
#heading strong {
border: 2px dashed;
}
I would recommend surrounding each notice in a span and append this to your #heading inside of an li and then applying this style:
#heading li {
list-style:none;
margin: 0 auto;
text-align: center;
}
#heading li span {
border: 2px dashed;
font-weight: bold;
}
you html would look something like this:
<ul id='heading'>
<!-- your newly inserted notice -->
<li><span>text</span></li>
</ul>
This will remove the need for the center and br tags.

How can I add my own CSS styles to CKEditor

There is already a post dealing with this however, everything that was suggested has been tried and still nothing works this is what I have so far:
In the config.js file
CKEDITOR.editorConfig = function(config)
{
config.defaultLanguage = 'en';
config.language = 'en';
config.resize_dir = 'vertical';
config.format_tags = 'p;h1;h2;h3;h4;h5;h6';
config.extraPlugins = 'stylesheetparser';
config.contentsCss = '/css/fileName.css';
config.stylesSet = [];
};
then in the css file mentioned above is some styling for the h1, h2, h3 etc..looks something like this:
h1 {
font-size: 24px;
font-family: "Arial", "sans-serif";
color: #5B5B5B;
}
h2 {
font-size: 24px;
font-family: "Arial", "sans-serif";
color: #FF4040;
}
h3 {
font-size: 24px;
font-family: "Arial", "sans-serif";
color: #60bf00;
}
the issue is that this is not changing the h1, h2, h3 etc.. tags, any ideas on how I can get this to work would be greatly appreciated.
I have a wrapper function that I use to init the RTE. Try doing something along these lines, which is similar to what #MiniRagnarok posted.
I just ran a test and it changes the CSS in both the editor's format and the inside the editor's contents. Be aware that you would need to reference the stylesheet on the page that the content is being display on or you won't see the updated styles.
function rteInit(inputId, height) {
var editor = CKEDITOR.replace(inputId,
{
contentsCss: '/admin/css/ckeditor.css',
height: height,
toolbar: [ <!-- Toolbar options --> ]
});
}
Try forcing overriding with !important. Eg:
font-size: 36px !important;
You could always go to ckeditor/contents.css and make all of your changes in that file. Those changes will be reflected in the editor.
Adding your own file is done by setting the config.
config.contentsCss = '/css/mysitestyles.css';
config.contentsCss = ['/css/mysitestyles.css', '/css/anotherfile.css'];

Link Changes Color On Multiple Hovers

I was wondering how it may be possible to change the text color of my anchor multiple times, different colors each time said anchor is hovered over. I have scoured the internet and StackOverflow, and this has to be the closest thing I came to:
http://www.codecademy.com/es/donvomar/codebits/xIEpDx
That link bears the same general idea of hovering over something multiple times and it changing color each time.
I did take a look at the code, but thought of two things to fix: one, I am not familiar with jQuery, but minimally with JS; and two, that I want to specify my colors; I noticed his were random. To give you a picture, here's my code just for the (empty) link and its styling:
<!DOCTYPE html>
<html>
<body>
<div class = "menu">Text block for demonstration</div>
<style>
.menu {
font-family: Bebas Neue, Helvetica, Arial, sans-serif;
font-size: 1.5em;
color: white;
padding: 10px;
border: 1px solid black;
width: 300px;
clear: both;
background-color: black;
}
</style>
</body>
</html>
To sum it all up: Basically, I want the text to change color each time it is hovered over, be able to specify the colors, and loop them.
Try this:
HTML
hello world!
JS
var arr = ['#f00', '#0f0', '#00f']; // Just add more if you like
var i = 0;
var start_over = arr.length;
$("#test").mouseenter(function(){
i++;
if (i == start_over) {
i = 0;
}
$(this).css('color', arr[i]);
});
JSFiddle
http://jsfiddle.net/V7qGx/
onmouseover = function() {
this.style.color = colors[this.dataset.n++ % colors.length];
}
onmouseout = function() {
this.style.color = '';
}

how to give auto scroll to textarea

I have written an HTML form with a text area, text box and a button. Whatever I have typed on the textbox will be appended to the textarea when the button is clicked. Now, my problem is when the text area is completely filled, the newly arriving text appears at the bottom and I have to scroll down manually to view this text. Is there any method in javascript to make the arriving text to be visible always without scrolling down...Please help
I'm not really sure if this is what you want but have a look this:
http://jsfiddle.net/yV76p/
var textarea = document.getElementById("textarea");
textarea.onkeyup = function(evt) {
this.scrollTop = this.scrollHeight;
}
You can find the details on it here: Auto resizing textarea link down jquery
This example increases the size of the textarea as the content text is added;
Example
Javascript
var txt = $('#comments'),
hiddenDiv = $(document.createElement('div')),
content = null;
txt.addClass('txtstuff');
hiddenDiv.addClass('hiddendiv common');
$('body').append(hiddenDiv);
txt.on('input', function () {
content = $(this).val();
content = content.replace(/\n/g, '<br>');
hiddenDiv.html(content + '<br class="lbr">');
$(this).css('height', hiddenDiv.height());
});
txt.trigger('input');
CSS
body {
margin: 20px;
}
p {
margin-bottom: 14px;
}
textarea {
color: #444;
padding: 5px;
}
.txtstuff {
resize: none; /* remove this if you want the user to be able to resize it in modern browsers */
overflow: hidden;
}
.hiddendiv {
display: none;
white-space: pre-wrap;
word-wrap: break-word;
overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */
}
/* the styles for 'commmon' are applied to both the textarea and the hidden clone */
/* these must be the same for both */
.common {
width: 500px;
min-height: 50px;
font-family: Arial, sans-serif;
font-size: 13px;
overflow: hidden;
}
.lbr {
line-height: 3px;
}
For having auto scrolling feature for textarea add this piece of code at the end of where ever you are trying to attend the content from textbox:
var console = $('#area');
console.scrollTop(
console[0].scrollHeight - console.height());
DEMO
Hope this helps :)

Make the image inside of a div change to another image on mouse over

How can I using jQuery make the image inside of a div change to another image on mouse over? I have a div that holds inside of it an image, a header, and some text. I want to make the image change on mouse over.
Also the template I use uses a lot of jquery but the files are all over the place. Where should I put the function?
EDIT: Here's the code I have so far:
CSS:
#tour {
overflow:hidden;
width:100%;
padding:56px 0 47px
}
#tour #link {
height:auto;
width:200px; /* 140px + 60px */
float:left;
margin-right:25px;
margin-left:10px;
}
#tour #link:hover {
cursor:pointer;
}
#tour img {
/* Float the image to the left of text */
width:50px;
float: left;
margin-right:10px;
height:auto;
}
#tour h1, h2, h3, h4 {
display:block;
width:140px;
float:left;
}
#tour p, #tour p.last {
display:table-row;
width:140px;
alignment-baseline:baseline;
/* Custom added */
color: #333;
font-size: 10px;
margin: 5px;
font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
font-size: 11px;
width: 140px;
}
HTML:
<div id="tour">
<div id="link" onclick="location.href='#';" >
<img src="images/icn1.png" alt="" />
<h2>Pitch</h2>
<p>Present your ideas in a manner that will leave your customers in amazement.</p>
</div>
</div>
$('div#imageContainer').on('mouseover', function(){
$(this).children('img').attr('src','../newImage.png');
});
That'll do it. Doesn't matter where you put the code, as long as it's within the $(document).load(function(){...});
NOTE: this is using the latest jQuery 1.7.1 .on() function which is new to this version. Same thing can be accomplished with .bind()
Update for comments:
If you want to keep this function in a separate file, you can wrap it in a function
function imageSwap(){
$('div#imageContainer').on('mouseover', function(){
$(this).children('img').attr('src','../newImage.png');
});
}
And then just call the imageSwap() function from within the document load.
Also, if you want to use this on multiple divs with different images, you can do one of two things. Either A) name your images something like img1_over.png and img1.png, in which case you can modify the code as such:
$('div#imageContainer').on('mouseover', function(){
var img = $(this).children('img');
img.attr('src', img.attr('src').replace('.png', '_over.png'));
});
Or you can store the image path in a data attribute on the image themselves. In your HTML you would add the hover image to a data attribute like so:
<img src="../cool_img.png" data-hover="../ever_cooler_image.png" />
And your code would look like this:
$('div#imageContainer').on('mouseover', function(){
var img = $(this).children('img');
img.attr('src', img.data('hover'));
});
I would recommend doing this in CSS with a sprite background image, but if you must do it in jQuery...
$(function() {
var div = $("#yourDiv");
var img = div.find("img:first");
var orig = img.attr("src");
div.hover(
function() {
img.attr("src", "ImageOver.png");
},
function() {
img.attr("src", orig);
}
);
});
If you're so-inclined, you could also do this without javascript by replacing your image with an anchor element, styling it, with CSS, like this...
a.imageLink {
background: url('path/to/image.png') no-repeat;
display: block;
width: [width-of-image]px;
height: [height-of-image]px;
border: 0 !important;
outline: 0 !important;
}
and then swapping out the background image with the :hover pseudoclass:
a.imageLink:hover {
background-image: url('path/to/hover_image.png');
}
You should probably do this with CSS.
#img:hover {background: green;}
If you must use jQuery use .hover().
$("#img").hover(function (e) {
$(e.target).css('background', 'purple');
},
function (e) {
$(e.target).css('background', '');
});

Categories

Resources