Develop Reference

Two plugins in a textarea

I need to use two plug-ins in one element on my page. I've never needed to do this and tried as it is in the code below. Most did not work!
<script type="text/javascript">
$(document).ready(function()
{
var wbbOpt = {buttons: "bold,italic,underline,|,img,link,|,code,quote"}
// plugin one wysibb
$("#editor").wysibb(wbbOpt);
// plugin two hashtags
$("#editor").hashtags();
//the two plugin worked in textarea #editor
});
</script>
Can anyone help me? Thank you.

So you can't use them because each of them take control and wrap the textarea. Since the editor is the most complex of the two the best thing to do is to take the code of the hashtag and adapt it at your need.
So here's a working example, but if you want you can trigger the function I use to the change event (adding it) or some way else
<div id="higlighter" style="width;1217px;"></div>
<textarea id="editor"></textarea>
<br />
<input id="btn" type="button" value="HASH">
<br />
$(document).ready(function() {
var wbbOpt = {
buttons: "bold,italic,underline,|,img,link,|,code,quote"
};
$("#editor").wysibb(wbbOpt);
$('#btn').click(function () { report() });
});
function report() {
$("#hashtag").val($("#editor").htmlcode());
var str = $("#editor").htmlcode();
str = str.replace(/\n/g, '<br>');
if(!str.match(/(http|ftp|https):\/\/[\w-]+(\.[\w-]+)+([\w.,#?^=%&:\/~+#-]*[\w#?^=%&\/~+#-])?#([a-zA-Z0-9]+)/g)) {
if(!str.match(/#([a-zA-Z0-9]+)#/g)) {
str = str.replace(/#([a-zA-Z0-9]+)/g,'<span class="hashtag2">#$1</span>');
}else{
str = str.replace(/#([a-zA-Z0-9]+)#([a-zA-Z0-9]+)/g,'<span class="hashtag2">#$1</span>');
}
}
$("#editor").htmlcode(str);
}
you can check a working code here on jsfiddle.
http://jsfiddle.net/4kj7d6mh/2/
You can type your text and use the editor, and when you want to higlight the hastag you click the button. If you want that to happen automatically you have to change this line:
$('#btn').click(function () { report() });
And attach the function to the keypress for example (experiment a bit)

Toggle spans inside an <a>

I am trying to create a function that will toggle optional inputs if chosen, here is what I have done so far:
HTML:
<div>
<input>
<a class="input-toggle" href="#"><span>Toggle Option</span><span>Close</span></a>
<div class="input-toggle-content">
<input name="">
</div>
</div>
JavaScript:
$('.input-toggle').each(function() {
$(this).next("div").hide().end();
$("span:last-of-type").hide();
$(this).on('click', function() {
$(this).next("div").slideToggle();
$("span:first-of-type").hide();
$("span:last-of-type").show();
});
});
So, the way it should work is when clicked on .input-toggle the div that is just next to it will be toggled and if clicked again the div will go away... I got this bit working, however, I want to also toggle <span>Toggle Option</span> with <span>Close</span> and I can't get it working... I don't know if the way I structured my function is correct?

Try,
$('.input-toggle + div.input-toggle-content').hide();
$(".input-toggle span:last-of-type").hide();
$('.input-toggle').click(function () {
$(this).next('div.input-toggle-content').toggle();
var spans = $('span', this);
spans.not(spans.filter(':visible').hide()).show();
});
DEMO

here you go: http://jsfiddle.net/jPe3A/
$('.input-toggle').each(function() {
$(this).next("div").hide().end();
$("span:last-of-type").hide();
$(this).on('click', function() {
$(this).next("div").slideToggle();
if($("span:first").is(':hidden')){
$("span:first").show();
$("span:last").hide();
}
else{
$("span:first").hide();
$("span:last").show();
}
});
});

javascript functions to show and hide divs

Hello I have the following 2 JavaScript functions to open up a div and to close it.
<script>
function show() {
if(document.getElementById('benefits').style.display=='none') {
document.getElementById('benefits').style.display='block';
}
}
</script>
<script>
function close() {
if(document.getElementById('benefits').style.display=='block') {
document.getElementById('benefits').style.display='none';
}
}
</script>
Here is the html:
<div id="opener"><a href="#1" name="1" onclick=show()>click here</a></div>
<div id="benefits" style="display:none;">
some input in here plus the close button
<div id="upbutton"><a onclick=close()></a></div>
</div>
For some reason the show function works how it should, but the close button does not do its job. So if there is someone who could help me out I really would appreciate. Thanks a lot.

<script>
function show() {
if(document.getElementById('benefits').style.display=='none') {
document.getElementById('benefits').style.display='block';
}
return false;
}
function hide() {
if(document.getElementById('benefits').style.display=='block') {
document.getElementById('benefits').style.display='none';
}
return false;
}
</script>
<div id="opener">click here</div>
<div id="benefits" style="display:none;">some input in here plus the close button
<div id="upbutton"><a onclick="return hide();">click here</a></div>
</div>

I usually do this with classes, that seems to force the browsers to reassess all the styling.
.hiddendiv {display:none;}
.visiblediv {display:block;}
then use;
<script>
function show() {
document.getElementById('benefits').className='visiblediv';
}
function close() {
document.getElementById('benefits').className='hiddendiv';
}
</script>
Note the casing of "className" that trips me up a lot

The beauty of jQuery would allow us to do the following:
$(function()
{
var benefits = $('#benefits');
// this is the show function
$('a[name=1]').click(function()
{
benefits.show();
});
// this is the hide function
$('a', benefits).click(function()
{
benefits.hide();
});
});
Alternatively you could have 1 button toggle the display, like this:
$(function()
{
// this is the show and hide function, all in 1!
$('a[name=1]').click(function()
{
$('#benefits').toggle();
});
});

You need the link inside to be clickable, meaning it needs a href with some content, and also, close() is a built-in function of window, so you need to change the name of the function to avoid a conflict.
<div id="upbutton">click to close</div>
Also if you want a real "button" instead of a link, you should use <input type="button"/> or <button/>.

check this:
click here
<div id="benefits" style="display:none;">some input in here plus the close button
<div id="upbutton"><a onclick="close(); return false;"></a></div>
</div>

Rename the closing function as 'hide', for example and it will work.
function hide() {
if(document.getElementById('benefits').style.display=='block') {
document.getElementById('benefits').style.display='none';
}
}

Close appears to be a reserved word of some sort (Possibly referring to window.close). Changing it to something else appears to resolve the issue.
http://jsfiddle.net/c7gdL/1/

You can zip the two with something like this [like jQuery does]:
function toggleMyDiv() {
if (document.getElementById("myDiv").style.display=="block"){
document.getElementById("myDiv").style.display="none"
}
else{
document.getElementById("myDiv").style.display="block";
}
}
..and use the same function in the two buttons - or generally in the page for both functions.

How to call a jquery event in javascript object?

I am really new to javascript objects.
Here is my code:
(function(){
var homenavmenu = {
nav:$('.navMenuButton'),
target:$(this).attr('href'),
test:function(){
// alert(homenavmenu.target)
homenavmenu.nav.click(function(){
alert(1);
return false;
})
}
}
homenavmenu.test();
})()
Why doesn't it work? It won't alert(1);
Here is my HTML:
<div class="navMenu">
market
my
</div>

Working Demo http://jsfiddle.net/5JmdD/3/
PLease check your html again, demo is working with what you need.
Behavior: click on the button and you will get alert.
Hope this helps :)
code
$(function(){
var homenavmenu = {
nav:$('.navMenuButton'),
target:$(this).attr('href'),
test:function(){
// alert(homenavmenu.target)
homenavmenu.nav.click(function(){
alert(1);
return false;
})
}
}
homenavmenu.test();
})()​
HTML
<input type="button" value="hulk" class="navMenuButton" />​

ok it seems like you can't use
nav:$('.navMenuButton'),
should use
nav:'.navMenuButton',
invoke as
$(homenavmenu.nav).click(function(){
alert(1)
})
this work for me,but i don't know why it worked in the example above.

jQuery toggle search button

I use old javascript code to flip my search button from search to searching in my forms as follows
<div id="search_clickable"> <input class="search" type="submit" value="search" onClick="javascript:flipSearchButton();"></div>
<div id="search_unclickable" class="hidden"><img src="/assets/img/searching.png" alt=""></div>
My javascript function is
function flipSearchButton()
{
document.getElementById('search_clickable').style.display = 'none';
document.getElementById('search_unclickable').style.display = 'block';
}
How to I achieve this with jQuery?

function flipSearchButton(){
$('#search_clickable').hide(); // or - $('#search_clickable').toggle();
$('#search_unclickable').show(); // or - $('#search_unclickable').toggle();
}
And stop using inline javascript:
$('.search').click(flipSearchButton);
Note that your search button is of type submit (?!) so it will submit the form, You probably want to change the type to button or return false from the callback:
function flipSearchButton(){
$('#search_clickable').hide();
$('#search_unclickable').show();
return false;
}

include jquery:
<script type="text/javascript" src="jquery.js"></script>
then:
function flipSearchButton()
{
$('#search_clickable').hide();
$('#search_unclickable').show();
}

i thought something like this:
$("#search_clickable").click(function() {
$("#search_clickable").hide();
$("#search_unclickable").show();
});
if you wanna toggle this element, use toggle() instead of hide() and show().

You can also consider to use fade effect to improve user experience
function flipSearchButton()
{
$('#search_unclickable').fadeIn('slow', function() {
// Animation complete
});
$('#search_clickable').fadeOut('slow', function() {
// Animation complete
});
};

You don't even need a separate function:
$("input[type=submit").click(function() {
$("#search_clickable").hide();
$("#search_unclickable").show();
});
Or use the id/class of the submit button if you want to on a specific button:
$(".search").click(function() {
$("#search_clickable").hide();
$("#search_unclickable").show();
});

Please refer below URL for toggle Div.
Check below Working Demos
As per your question : Demo1
As per my opinion : Demo2
Thanks