How can I insert text in the middle of text?
This is my code:
<div class="MyText"> some content some dynamic dontent. my color is BLUE. some content </div>
Here I need to change the Value "Blue" to any other color by Jquery. Other Content in the div is come dynamically, So Apart from html(), append(), is there any way to fill it like php ?
Here we can do it via php like this
<div class="MyText"> some content some dynamic dontent. my color is <?php echo("blue") ?>. some content </div>
Can we do it in Jquery/ Javascript ?
Thanks in Advance
Use a SPAN tag with an id you can easily retrieve. Then you can change the content safely without having to resort to brittle manipulation.
<div class="MyText"> some content some dynamic dontent. my color is <span id="myColour">BLUE</span>. some content </div>
<div class="MyText"> some content some dynamic dontent. my color is <span id="blue" style="display:none">BLUE</span>. some content </div>
<button onclick="document.getElementById('blue').style.display='inline'">click me</button>
Sorry but i can't give you a jsfiddle of this but this will work.
Related
I am looking to reorder the contents of the div in a particular order. The contents inside of the div comes dynamically from CMS content. I have 2 paragraph elements that come from CMS, and one image inside of a div. Now my requirement is I want to show them in a particular order. I don't want to use flex display and give an order. Is there any other way I can achieve this?
Since it is a dynamic content, I am posting a sample markup of how it is going to look.
Sample Code:
These 2 div and its contents below are coming from CMS.
<div class="order-class">
<div>
<p> Some sample content </p>
</div>
<div>
<p> Some other sample content </p>
</div>
</div>
Here in my JSP I have another div with an image in it. Sample below
Sample Code:
<div class="koh-release-content-section">
<hst:html hippohtml="${pressRelease.content}" /> //This is the sample content mentioned above
<div class="koh-press-release-detail-image order-class">
<tag:imagePressRealeasetag image="${pressRelease.image}"/>
</div>
</div>
I am not able to figure out how to reorder these elements. Any help is appreciated.
I make 'close' icon in header of my text, so i want to make the "close" icon still available/ still on there when i scroll down. please help
<div class="content">
<img class="btnclose" src="images/close.png" onclick="showMenuform()">
<br>
<br>
<img src="images/TOEFL.gif" alt="">
<br>
<br>
<br>
<div class="text">
/**my text**/
</div>
</div>
http://codepen.io/KevinWang15/pen/jqpoQd
Is this what you're looking for?
move <img>,<div>.. (all the content you want still on) out of the .content div, into a new div
set css of the new div to:
style="position:fixed;top:0px;right:0px"
try to write btnclose class out from content class or change btnclose with id instead so you write css for btnclose id too
Also, try adding a display css property to it.
I have a text to speak script and it is called by Javascript on HTML like this;
<head>
<script src="speakClient.js"></script>
</head>
<body>
<button onclick="speak('type text to speak here')">Talk</button>
<div class="article">
<p>Sample text is here!!</p>
</div>
<div id="audio"></div>
</body>
Currently when 'Talk' button is pressed, the predefined text (in this case "type text to speak here") will be speak by TTS.
How to change it when button is pressed, it speaks whatever text inside div.article instead of predefined text?
Edit: Link to JS https://github.com/kripken/speak.js/blob/master/speakClient.js
Thanks in advance
You can get the textual content of an element easily with jQuery:
var textToSpeak = $('div.article').text();
Then set the onclick function dynamically:
<button onclick="speak($('div.article').text())">Talk</button>
It is better than using pure JavaScript and innerHTML property, as potential HTML tags will be stripped with this solution.
<div class="article">
<script>var text = "Sample text is here!!";</script>
</div>
<button onclick="speak(text)">Talk</button>
Give an id to the <p> tag, and then you can pull out the value by calling innerHtml.
Example:
<button onclick="speak(document.getElementById('textToUse').innerHTML)">Talk</button>
<div class="article">
<p id="textToUse">Sample text is here!!</p>
</div>
Try adding the following script to the element of which you want the text read.
onclick="speak(this.innerText);"
I try to develop some charts which should have online values. I have found this nice and free dashboard :
[http://jiji262.github.io/Bootstrap_Metro_Dashboard/][1]
I use Web sockets to change values of charts and it works very nice. I use justgage([http://justgage.com/][2]) plug-in. As you can see there are some square shapes with different colors(Disk Space Usage,Bandwidth,memory,CPU etc.) and i want to change color of these squares according to values.
Here is div construction :
<div class="span2" onTablet="span4" onDesktop="span2">
<div ID="ID1" class="circleStatsItemBox green">
<div class="header">Machine 1</div>
<span class="percent"></span>
<div class="circleStat">
<div id="g1"></div>
</div>
<div id="f1" class="footer">
<span class="number">cards/hour</span>
</div>
</div>
</div>
g1 is justgage gauge and i use this code to change div class : (to change of square)
$('#ID1').addClass('circleStatsItemBox green').removeClass('circleStatsItemBox orange');
But this code changes title and footer color as same with body color. I want that footer and header color should be arranged according to new div class (for example according to circleStatsItemBox orange at my sample)
Thanks
try to remove before adding:
$('#ID1').removeClass('circleStatsItemBox orange').addClass('circleStatsItemBox green');
try with toggleClass in jquery.
ToggleClass: Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the switch argument.
$('#ID1.circleStatsItemBox').toggleClass('orange green');
I have a page with lots of contents, I want to put a hyperlink in the top, that scrolls the page to a div .
this is my code :
<a id = "show" class="show" href="#" onclick="return toggleOptions(this);"><h2>FIRST BUTTON</h2></a>
<div id="toggleOptions" class="toggleOptions"> // this is div which is somewhere in center of page
text text text....
more text text....
text text.........
</div>
I know that I need to use JavaScript, something like that:
<script type='text/javascript'>
window.location = "/index.php#myDiv";
</script>
Just don't know how to do It correctly. Please help me .
Try:
Go to my div
<div id="idOfDiv">...</div>
No need to javascript, simply do this :
<a id = "show" class="show" href="#toggleOptions"><h2>FIRST BUTTON</h2></a>
<div id="toggleOptions" class="toggleOptions">
text text text..
more text text..
text text.......
</div>
<a id = "show" class="show" href="#toggleOptions"><h2>BUTTON</h2></a>
<div id="toggleOptions" class="toggleOptions">
text
</div>
No need of having javascript for this. Just use the href of tag as follows:
<a href="#toggleOptions">
Where #toogleOptions is the id of your target divs.