I am using Visual Studio 2010 and jQuery 1.7.
Assume that my page is completely covering the div width 100% and height 100%.
i just want to select a specific part and change the CSS of that part, for example, highlight it with a different color.
I want to highlight a specific part of the DIV using jQuery
Please help me out !!!!
Update
<html>
<head></head>
<body>
behind the whole html of the page this
div overlay's the html tag
<div Style="width:100%; height:100%; z-index:100000;">
</div>
</body>
</html>
I don't want select the text like bugmuncher.com
To perform a highlight to a certain div id or class.
$('#id').css('backgroundColor', 'yellow');
Make sure you wrap the specific code with a span tag.
Your sentence with a <span id="id">highlighted</span> part.
Maybe try the jquery hilighter plugin. Simple to use.
Related
I'm making a loader for a website. The HTML is as follows:
<div class="loadingContainer">
<div class="greyContainer">
<img class="eggGrey" src="img/egg-grey.png">
<p id="bluePercent">50%</p>
</div>
<div class="blueContainer">
<img class="eggBlue" src="img/egg-blue.png">
<p class="greyPercent">50%</p>
</div>
</div>
When element blueContainer has a height of 2%, I want the text in both paragraphs to be 2%. I want the paragraph text to always show the height in percentage of blueContainer. Height values are applied through an external CSS file, I am not very well versed in the language of Javascript, and I've tried some ways but I cannot figure out how I should do this.
EDIT: Some of the things I've tried (and probably miserably failed at):
function percentages(){
document.getElementByClassName("greyPercent, bluePercent"){
if (document.getElementByClassName("greyContainer, blueContainer"){
}
}
}
This is where I'm stuck at too, because I have no idea how I could tell the javascript to run the function when the element has a certain height.
EDIT: Here is a jsfiddle to illustrate what I'm doing. I gave the containers a background colour because of a lack of images.
https://jsfiddle.net/1s5tw6es/
from https://stackoverflow.com/a/9628472/2818869.
First, There is no such css-changes event out of the box, but you can
create one by your own, as onchange is for :input elements only.
not for css changes.
There are two ways to track css changes.
Examine the DOM element for css changes every x time(500 milliseconds in the example).
Trigger an event when you change the element css.
Use the DOMAttrModified mutation event. But it's deprecated, so I'll skip on it.
Nowadays, there are more solutions.
MutationObserver (If you can drop old IEs)
CSS Element Queries
But in this case, I would create function like setProgress which change both the element height and the paragraph.
Example: http://jsfiddle.net/e59u3p4j/1/
This should work:
$("document").ready(function(){ //In case you didn't use this
$(window).resize(function(){
$('#bluePercent').html($('.blueContainer').css('height')/16.0*100); //Converting height into percentage and adding it to the p tag
});
});
I want to get the body element of an html using jquery and then disable the vertical scrolling?
Try this...
$('body,html').css('overflow','hidden');
the ,html allows you to also include the <html> because some browsers may use that as the base as oppose to the <body> tag so it helps treating both as if they were one.
helpful
any tag should be selected like so $('a'); or $('body');
an element can be selected by id using the prefix # so
<a id="c_1" >CLick Me</a>
$('#c_1');
or by class with the prefix .
<a class="classname">Click Me</a>
$('.classname');
for more information read http://api.jquery.com/category/selectors/
as for the scroll bars they are controlled by css, you could simply go on a css file and do the following.
body, html {overflow: hidden;}
the overflow parameter allows you to control what happens when content overflow the assigned width and hight.
http://reference.sitepoint.com/css/overflow
or the proper reference http://www.w3.org/TR/CSS2/visufx.html
sorry if this is too technical, but one day you would have to learn about these :)
You can get the body element with: $("body")
then disable the scrollbars with CSS
$("body").css("overflow", "hidden");
Since nobody mentioned this, it's pretty easy to select the body element without jQuery.
It's simply:
document.body;
And based on your question, you would disable vertical scrolling by setting overflow: hidden:
Example Here
document.body.style.overflow = 'hidden';
I've got this HTML. Flash# divs are for flash objects (swfobjects). There is a container div container2 which I want to place it over its content, like a curtain when flash objects are updated and rebuilt to prevent the user from clicking them.
//rest of html code
<div id="container2">
<div id="flash1"></div>
<div id="flash2"></div>
<div id="flash3"></div>
<div id="flash4"></div>
</div>
//rest of html code
I've tried an absolute positioned div over the flash divs to achieve this but this doesn't work with jQuery slidetoggle effect which I use in a previous div (it has a weird width behaviour that narrows the page) therefore I've decided to try this different approach, which also seems to be more efficient.
Any idea of how to achieve this? I'm open mainly to jQuery but also to strict Javascript or whatever.
Delete div when slide up.
Add div when slide down.
Good luck =)
For me you have to add another div inside the container and use it to overlay the flash objs. Leave the container in position:relative and overflow:hidden and use a div child to cover the content!
Marco
I eventually follow the workaround proposed by mkk. This is to completely delete any applied rule to the slid div and have just worked for me.
Simple but effective.
I have a div with text loaded from a database in it. I have no control over the length of the text and want to calculate or count the number of lines it wraps to so I can hide all except a small segment at the beginning until a user clicks on "more".
Is there any way to do this with javascript?
Thanks in advance.
You should be able to do this be retrieving the height of the div and dividing it by the font's line height, assuming the div's height is controlled by the amount of content within it.
document.getElementById('my_div').offsetHeight;
and
document.getElementById('my_div').style.lineHeight;
Use an element with overflow: hidden, and change that style when they click on more.
HTML:
<div>
<div id='content'>...</div>
<div><a id='morebutton'>More</a></div>
</div>
CSS:
#content {
height: 200px;
overflow: hidden;
}
JS (using jQuery):
$("#morebutton").click(function() {
$("#content").css(overflow: "visible");
}
In my advice you have 2 way of do this using Progressive enhancement:
1) Write all the text in it and then use javascript to collapse it
(splitting for line-break) (placing for example a "..." link to show up all the div)
2) Generate server-side an href link "..." that when clicked make you explode the text,
on page/content load replace the "a" link and make it use an ajax call instead.
I will use the 2nd option.
well heres my problem. Lets say i have 3 div tags, all are 100pixels wide:
<--- DIV WIDTH --->
Text in div 1
Text in div two, it overflows
Text in div three
<--- DIV WIDTH --->
Now, currently i have this css for the divs:
width:100px;
overflow:hidden;
What i want to do is if the text overflows, it scrolls like a marquee so all the text can be seen if you wait a little bit. But i only want the marquee to show if the text overflows.
How would i do this?
Thx, Tony
solving the conditional part
JS
var el = $('your element');
if (el.get(0).scrollWidth > el.width()) {
// Your marquee code here
}
$(function(){
$box = $('div.box');
$box.children().each(function(){
if ($box.width() < $(this).width()) {
$(this).wrap('<marquee>');
}
)};
});
Would work in jQuery (I haven't checked it yet. If you have any problems with it reply). Optionally, you could set a scroll attribute in css.
The conditional part can be resolved easily like rennat proposed.
Is it possible for you to use jQuery? If it is, build your html compatible with jQuery marquee plugin, and just call $(element).marquee(); for the animation. It's better than the '<marquee>' tag since it uses only divs with proper css attributes (avoiding non-standard tags use).
This wouldn't work for your problem as described (plain text in a div), but if that's just a minimal case, you can use overflow: auto, which will add a horizontal scrollbar if it overflows.
(Note also that marquee is a non-standard HTML tag.)