I have a used case, where I have multiple text-areas on page. And unfortunately the name and id for these textareas are same. Actually it is tabbed section on the page.
I need to apply ckeditor to particular tab section, and not all.
CKEDITOR.replace('textarea');
replaces only the first textarea. However, I want to skip first and replace second or for another context I want to skip second and replace third and first textareas of same name.
Any idea?
All html elements are stored in an index . Try the following jquery funtion .eq() to grab a specific textarea .
Example .
var textArea1 = $("textarea");
then replace a specific textarea at any index in the dom..
// FYI grabing the 2nd <textarea> element on the page...
CKEDITOR.replace(textArea1.eq(1))
WORKING EXAMPLE HERE: http://codepen.io/theConstructor/pen/pyRXYa
Well I tried something like this.
Each tabbed section has its own id or whaterver,
$('textarea.ckeditor').each(function() {
CKEDITOR.replace(this);
});
And this worked fine for me!
Related
I want to replace a word with hyperlink on every post. So i used this code.
document.body.innerHTML = document.body.innerHTML.replace('Ronaldo', 'Ronaldo');
This code is working properly but the issue is, it's also replacing Ronaldo in title and in heading. I don't want that. I want that code to only replace words in post-body and not on post-title or <h> tags
I'm tagging jquery and ajax because they too know javascript.
You are selecting whole body with : document.body;
when you can just select the specific one by using: document.getElementById("yourId");
and replaces it's Ronaldo.
So my website is built using a company's software called Inksoft which leaves me very little to work in the way of customization. So I have to do many workarounds.
Here is my site's homepage.
The header on top of the page only has two links right now. "Products" and "Design Studio". My goal is to add an "About Us" link and "Buyers Guide" to the header as well.
I cannot add new content to the header using Inksoft's backend. So I coded a workaround to replace the content of existing DIV's within the header to say and link to where I want them to go.
The only issue is, the responsive mobile-nav loses functionality when this is implemented. As seen here on this test page.
The test page has the About Us in the top header, added by the use of this code:
<script>
$("#header-nav-designs").html('<document.write="<li id="header-nav-studio"><font color="#000000">About Us</font></li>');
</script>
So, the simplified question is: how do I implement this code without losing the responsive functionality of the nav bar?
The jQuery .html function will replace the HTML inside the target element. If you want to just append the one value, you likely want to .append to the element.
In addition, you aren't setting the HTML to a valid html string. You probably just want to get rid of the <document.write=" at the beginning of the string. The rest of it looks fine with just a cursory glance.
So:
<script>
$("#header-nav-designs").append('<li id="header-nav-studio"><font color="#000000">About Us</font></li>');
</script>
Edit:
After looking at it a little more, it appears as though the $('#header-nav-designs') that you are selecting is already an <li> which means you need to either select the parent <ul> list or you can use the jquery .after function instead.
<script>
$("#header-nav-designs").after('<li id="header-nav-studio"><font color="#000000">About Us</font></li>');
</script>
And as someone else commented above, you are getting an error on the page. It appears as though you are trying to get an element with the id divID and the appending some html to it, but there is no element with the id divID and so you are getting an error saying that you can't read the property innerHTML of null as the call to document.getElementById is returning null (element not found).
Element id header-nav-designs witch your code is referring have CSS style on line 170:
#header-nav-designs {display:none;}
The element will be hidden, and the page will be displayed as if the element is not there. With display:none;
If I understand you correctly your code selector points to wrong element id. It should point $(".header-nav > ul"). Document.write is not needed inside jQuery you need to give only an valid html string as argument.
jQuery html function erase html that is all ready inside element and replace it with html string given as argument. You have to use append if you want to add more html but not remove what is allready in element.
$(".header-nav > ul").append('<li><font color="#000000">About Us</font></li>');
$(".header-nav > ul").append('<li><font color="#000000">Buyers Guide</font></li>');
I have a rate box on my site that appears beneath an article, and then again that same rate box appears on comments people leave regarding the article. So the rate box appears multiple times on the page. I'm trying to change the text that appears within that rate box, but infortunately I don't have server access on the type of site I have. So I need to do it with scripting.
The small script I'm using now works, but it's only working for the very first rate box. I need to change the text in each of them however. I'm trying to change the existing text that says "Rate" into "Like".
.SUI-RateBox is the div class, and the text I need to change sits in a span within that class.
The code that I have that works on just the first instance is this:
<script>
$(".SUI-RateBox span:contains('Rate')").html("Like");
</script>
How can I make this happen, but to all of the rate boxes.
The dom structure is at the below link.
http://www.spruzstuff.spruz.com/pt/Element-Background-Image/wiki.htm
I'm not sure why you're using # (nevermind, you changed your question's details), but try this:
<script>
$(".SUI-RateBox").find("span:contains('Rate')").html("Like");
</script>
http://jsfiddle.net/EhPP7/
Alternatively, I guess you could also try .each() to iterate through each of span tags within div.SUI-RateBox and check text value one after another.
$(document).ready(function () {
$("*.SUI-RateBox").each(function(){
var sp = $(this).children("span");
if(sp.text() == 'Rate')
sp.text('like');
});
});
http://jsfiddle.net/cZMFC/1/
Also check out jQuery .each() API
First of all this is how the script works: jsfiddle
The 'searchList' setting specifies the content that will be searched. In this case it is searchable tr. Finally, the 'searchItem' setting allows to dive in and specify an individual element to search. In this case, I use 'td'.
In this fiddle
I have a list of thumbnail images with some informations, what I want to do is to be able to search for "something" and then to show the image and the text related to that specific thumbnail.
Hope you understand what I'm trying to achieve.
Out on a limb, but your selector for searchList looks wrong:
'searchList' : '.imgscontainer portfolio-v6-items ',
Surely that second class should have a dot before it, and they're on the same element, so no space:
class="imgscontainer portfolio-v6-items"
I'm working with on developing one of the social networking site and its having some notification features in left panel.
Whenever any user have played a game it will automatically change the number of notification count.
For that i have using below code line.
jQuery('#count_id').load('mypage.php');
But it will retrieve me whole site content with header,footer and content area in the response text, which is wrong as per my requirements.
but if i used below code of line
jQuery('#count_id').load('mypage.php #count_id');
then it will retrieve me a real count but add another div in between the original,
Original html:
<div id="count_id" class="notify">2</div>
and Code after retrieving response:
<div id="count_id" class="notify">
<div id="count_id" class="notify">1</div>
</div>
which is also not as expected. count are right but i don't want to add new div inside a original one.
What should i need to change in my code?
Thanks.
jQuery('#count_id').load('mypage.php #count_id > *');
That would bring only the DOM childs (the content)
Because this is how it works. Also it enables you to attach events to the element you load and delegate them inside this element (so new elements can also benefit from attached JavaScript events) - see .delegate().
If you want to replace the element, you can try the following:
jQuery.get('mypage.php', function(data){
jQuery('#count_id').replace(jQuery(data).find('#count_id'));
}, 'html');
I did not test it, but it should work.
Ivan Castellanos is however right. According to the documentation, you can provide any selector after the first space in the .load()'s parameter.
To retrieve count_id, you can directly get the html value in the div like this:
<script type='text/javascript'>
jQuery(document).ready(function()
{
countVal = $("#count_id").html(); //returns the html content inside the div, which is the count value
countVal = parseInt(countVal); //This will convert the string to type integer
});
</script>
Note:
If you want increase the count and update the div value, you can add the following lines:
countVal++;
$("#count_id").html(countVal);