Lets say I have a div like this:
<div id="test" class="sourcecode">
"Some String"
</div>
Is it possible to have css and js to highlight a portion of that string based on a search query?
Like if I was searching for the word Stri it would just highlight that part?
You'll have to divide the text, separating the highlighted part into a <span>. Like this.
<div id="test" class="sourcecode">
"Some <span style="background-color:yellow">Stri</span>ng"
</div>
To do characters that represent HTML tags, if you have:
<div id="test" class="sourcecode">
<html>String</html>
</div>
...you can highlight the same way as before:
<div id="test" class="sourcecode">
<span style="background-color:yellow"><html>Stri</span>ng</html>
</div>
Try the jquery.highlight plugin.
Make a jQuery selector containing the div in which you want to highlight some text:
var $div = $('#test');
Then run the highlight plugin with the word(s) you wish to highlight
$div.highlight('Stri');
Also you should style the class "highlight" in your css, since that's the class the highlighter will give the highlighted text:
.highlight
{
background-color: yellow;
outline: 1px solid black;
}
<div id="test" class="sourcecode">
"Some String"
</div>
in javascript after getting search result.
<script>
var test = $('test').innerHtml;
var query= 'Str';
var new_str = test.replace(query, '<font style="background:yellow;color:red;" >'+query+'</font>');
$('test').innerHtml = new_str;
</script>
Related
I'm working on the playground using from codemirror.net, and is works great. My next step is to have auto load set a value to file path name, each textarea will load file path from .html, .css and jquery.
currently in codemirror showing
<div id="wrap">
<!-- Code Editors --> <section id="code_editors">
<div id="html" class="code_box">
<h3>HTML</h3>
<textarea name="html"></textarea>
</div>
<div id="css" class="code_box">
<h3>CSS</h3>
<textarea name="css"></textarea>
</div>
<div id="js" class="code_box">
<h3>JavaScript</h3>
<textarea name="js"></textarea>
</div> </section>
<!-- Sandboxing --> <section id="output">
<iframe></iframe> </section> </div>
The result of preview textarea showed "Hello world" that because in javascript showed
html_editor.setValue('<p>Hello World</p>');
css_editor.setValue('body { color: red; }');
so i change set value in codemirror like this.
<textarea name="html"><?php
echo file_get_contents('testcode.php');
?>
</textarea>
</div>
this works great when I see HTML code inside of text area but unable to see the preview in the text area.
so I'm trying to solve this how to see preview too using
<?php echo file_get_contents('testcode.php');?>
I thought to make change in javascript where it said
html_editor.setValue('<p>Hello World</p>');
css_editor.setValue('body { color: red; }');
my question is that how can I write code in PHP inside of javascript file.
i tried
html_editor.setValue('<?php echo file_get_contents('testcode.php');?>');
css_editor.setValue('body { color: red; }');
it does not work.
Any other idea how to solve this to make both works!
many thanks.
AM
Try this :
var = "<?php echo file_get_contents('testcode.php')?>";
html_editor.setValue(var );
css_editor.setValue('body { color: red; }');
I'm not sure if this is possible but I would like to add a border to each number in a div.
I know how to add a border to a div but I would like that each number in a div to have a border.
Example:
<div id="borders">12345</div>
The output should look like this:
(1) (2) (3) (4) (5)
Where "()" is the border.
PS: I don't want to use a separate div for each number because this number will be a php code, like this:
<div id="borders"><?php $number; ?></div>
Is it possible?
Not possible without adding extra markup:
Live example: http://codepen.io/anon/pen/gDHlA
Markup
<div id="borders">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
Css
span:before, span:after {
display: inline-block;
}
span:before {
content: "(";
}
span:after {
content: ")";
}
I've inserted parens, of course feel free to change them with a pipe (|) or use borders applied to span elements (in this case, give them also a display, a width and a height)
About your latest requirement, your code can easily adapted like so:
$number = 12345;
$span_number = "";
foreach (str_split($number) as $key => $digit) {
$span_number .= "<span>$digit</span>";
}
echo $span_number;
//output: <span>1</span><span>2</span>...<span>5</span>
I think it is impossible. You can wrap each number in a <span> and make border for spans
You can use span elements like this, but you have to build all tags according to the numbers, using php string functions to split each number. There is no way to do that without tags.
<div id="borders">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
Your CSS:
#borders span {
display:inline-block;
border:1px solid red;
padding:2px;
margin:2px;/*if you want space between numbers*/
}
I need to draw text in top of the image this the look like
when the page load i need to display price in side the photo.I try it like this
<button class="btn btn-danger" id="buy-btn" data-toggle="modal" data-target=".package-buy-modal">BOOK NOW</button>
<img id="price-tag" style="position: relative;width: 100%; /* for IE 6 */" src="<?php echo base_url()?>assets_profile/img/price.png">
<h2 style="-o-transform: rotate(32deg);-moz-transform: rotate(32deg);-webkit-transform: rotate(32deg);">$<?php echo $car_data['Charges']; ?></h2>
But it didn't work as i expected.how can i do this.if there is another easy way to this ?
Here is an example of using background-image within a div so that you can put more inside the div, ie)text
HTML:
<div id='image' src='http://i.stack.imgur.com/1DZ6X.jpg'>
<h2 id='price'>Price: $10</h2>
</div>
CSS:
#image {
width:243px;
height:163px;
background-image:url('http://i.stack.imgur.com/1DZ6X.jpg');
}
check it out here
Add a z-index value to the <img> and the <h2>. For example, z-index:98 on the <img>, and z-index:99 for the <h2>. (A higher value because you want it on top).
I would also recommend moving all styles to a css file, rather than use the inline style attribute.
I'm trying to give the first div a top margin only if the class fixed-header exists, I've tried doing this with pure css but there were to many variables and I was losing track so I'm thinking use jquery.
Here's some simple html
<div id="page-container">
<div id="header" class="fixed-header">header</div>
<div>Test 2</div>
<div>Test 3</div>
<div>Test 4</div>
<div>Test 5</div>
</div>
Basically, if .fixed-header does exists give the first div, in this case it's 'test2' a top margin which matches the header, if there is no 'div2' then give 'div3' a top margin and so on.
Now for the tricky part, the top margin must be determined from a php script, here's how I get the header height below.
<?php echo $header_options['header_height'] ?>
How can I do this in jquery?
Here's a basic fiddle to start me off
If i understood you correctly, you can do that in CSS like that:
.page-container div.fixed-header:nth-child(1) + div,
.page-container div:not(.fixed-header):nth-child(1){
margin-top:20px;
// or
margin-top: <?php echo $header_options['header_height'] ?>px;
background:red;
}
this will give the first div after .fixed-header or the first one in .page-container (if no fixed-header exists) a margin.
Demo
If you want the margin be exactly the same as the height of the header without php, then yes, you'll have to resort to javascript/jquery. Something like this
$('#page-container div.fixed-header:nth-child(1)').each(function(){
$(this).next().css({'margin-top':$(this).height()});
});
Use length to find the div exits or not:
if($('.fixed-header').length > 0){
//do your stuff here
}
And I think it should work just with css:
#page-container .fix-header{
margin: 5px;
}
You can do this in CSS alone you know....you dont need to resort to Javascript or jQuery.
#page-container div:nth-child(1)[class='fixed-header']{
background:red;
}
Demo of the above, variation 1, variation 2
Use CSS in the head of the page:
#page-container #header.fixed-header + div {
/* the following should be parsed by php, but
I don't know whether this generates a full CSS
rule, or just the relevant length. Adjust as appropriate */
<?php echo $header_options['header_height'] ?>
}
There's no need for jQuery in here...
You want to div that follows .fixed-header to have a margin? Use the adjacent selector "+"
<style>
#header.fixed-header {height: <?php echo $header_options['header_height'] ?>px}
#header.fixed-header + div {margin-top: <?php echo $header_options['header_height'] ?>px}
</style>
Btw, you could just set a margin-bottom on #header.fixed-header... ;-)
Well, if each margin is the same, then give a data-attribute to the container. If each margin has different height, the most intuitive option is to put a data attribute to each item.
If each margin is the same, here is you code
$(".fixed-header").each(function(item) {
$($(item).next()).css('margin-top', $(item).parent().data('margin-height'));
});
Your markup should look like this:
<div id="page-container" data-margin-height="50px">
<div id="header" class="fixed-header">header</div>
<div>Test 2</div>
<div>Test 3</div>
<div>Test 4</div>
<div>Test 5</div>
</div>
This is equivalent to the following CSS, if every page-container has the same value as well.
.page-container .fixed-header + div {
margin-top: 50px;
}
You can generate this CSS file with your PHP as well. To make life easier, you can even embed this to you HTML template. If the margin-height does not reflect any information, then possibly generating your CSS is the best option, because then, you don't need to put useless information outside a <style> or <script> tag.
<style>
.page-container .fixed-header + div {
margin-top: <?php echo $header_options['header_height'] ?>;
}
</style>
Another option is to use CSS3 attr, which is not yet supported completely in all browsers.
https://developer.mozilla.org/en-US/docs/Web/CSS/attr
.page-container .fixed-header + div {
margin-top: attr(data-margin-height);
}
This allows you to get rid of your script, but unfortunately, you will have to set data-margin-height for each .fixed-header.
I used .page-container classes in these examples, because this solution can be used if you have multiple different containers on the same page. If you only need one, you can just replace each .page-container to #page-container, and the code will work. Fiddle:
http://jsfiddle.net/k5V2a/
i am trying it get that div displaying 5 in a row and then start a new line and display more
atm all that is happening is the are going under each other.
CODE
< div>Line1< br />Line2< br>Line3< /div>
Thank you
If you want five divs side-by-side per line, the following works:
.cell { padding:0; margin:0; float:left; width:20%; }
.clear { clear:both; }
--
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
<div class="cell">7</div>
<div class="clear"></div>
For best results, all divs should have the same height. If they don't, you should place the <div class="clear"></div> after every 5th div.
A <br /> tag will always move to the beginning of the next line. So if you had this (I took the liberty to add a "/" to your second br tag, maybe this was the problem):
<div>Line1<br />Line2<br />Line3</div>
You'd get this:
Line1
Line2
Line3
Is that not what you want? If not, please clarify.
If you want the divs to display side-by-side you'll need to use css floats to do that.
<style type="text/css">
div { float: left }
</style>
Then, you'll need to use a <br clear="all" /> to move down to the next line.
This would mean that
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
Would show up as 12345 with the content all on the same line. Is this what you're looking for?