How can I center those two buttons in JS:
// create a sort by alphabet button
var sortabc = $('Sort alphabetically').toggle(
function(){
$("#tags ul li").tsort({order:"asc"});
},
function(){
$("#tags ul li").tsort({order:"desc"});
}
);
$('#tags').append(sortabc);
// create a sort by alphabet button
var sortstrength = $('Sort by strength').toggle(
function(){
$("#tags ul li").tsort({order:"desc",attr:"class"});
},
function(){
$("#tags ul li").tsort({order:"asc",attr:"class"});
}
);
$('#tags').append(sortstrength);
At this moment I get them like this:
Button 1 Button 2
I want them in the middle of the div.
With CSS, in your style sheet:
#tags {
text-align : center;
}
With jQuery, setting that same CSS property:
$('#tags').css("text-align", "center");
Demo: http://jsfiddle.net/z77Lm/
Try using tag inside the div:
<div>
<center>
...BUTTONS
</center>
</div>
Related
Here is my html,
<div id="personaldetails">
<ul>
<li class="clear"></li>
</ul>
<ul>
<li class="clear"></li>
</ul>
</div>
I want to hide div personaldetails when all the ul inside in div is empty.
If the ul is having element <li class="clear"></li> then the ul is considered as to be empty.
How to do this using Jquery ?
You can try this:
$('#personaldetails').find('ul').each(function(){
var txt = $("li", this).text();
if(txt.length <= 0){
$(this).hide();
}
});
if(!$('#personaldetails').find('ul:visible').length){
$('#personaldetails').hide();
}
Updated Fiddle
And to me you should hide all ul, if no ul are visible then you can hide the #personaldetails div.
Even one of answer is already accepted, I think it can be simple as:
if($.trim($("#personaldetails").text()) == '') {
$("#personaldetails").hide();
}
:)
Take a look at that code:
function foo(){
var all_li_clear = true;
$("#personaldetails > ul > li").each(function(){
if(!$(this).hasClass("clear")){
all_li_clear = false;
break; // No need to continue now
}
});
if(all_li_clear){
$("#personaldetails").hide();
}
}
You can see a fiddle example there, just comment and discomment foo(); line.
Javascript solution:
This will only hide the div if all li have clear class
$(function() {
emptyLi = $('#personaldetails ul li').filter(function(){
/*if($(this).hasClass('clear')){
return true;
}else{
return false;
}*/
return $(this).hasClass('clear');
}).length;
if($('#personaldetails ul li').length == emptyLi){
$('#personaldetails').css('display','none');
}
});
CSS:
This will hide the li with class clear, so if you not fixed height of ul or li and don't have padding , margin given to ul,li your div personaldetails will get hidden automatically when all li element have class clear
#personaldetails ul li.clear{
display:none;
}
-UPDATED-
You can use following code if you are deciding empty class based on clear class.
if($("#personaldetails ul li:not(.clear)").length == 0) {
$("#personaldetails").hide();
}
Or if you are looking for the empty div then you can just use the shortest code given by #Samiul Amin Shanto Like:
if($.trim($("#personaldetails").text()) == '') {
$("#personaldetails").hide();
}
Explanations
Method1:
$("#personaldetails ul li:not(.clear)")
This code find all li without the clear class. Then if no such li found, just hide the div. Fiddle
Method2:
$("#personaldetails").text() this code return innerHTML text striping all html tags. So no meter what the div contain ul, li or anything else, this will return the plain text content of the div, then striping any white space we can determine if the div is empty. If your intention is to hide the empty div not hiding the div which contain empty Ul this should be your choice.
This asumes that if you have the same amount of li's with the class clear, as there are ul's, they're all empty
var $wrapper = $('#personaldetails');
if( $wrapper.find('ul').length=== $wrapper.find('li.clear').length){
$wrapper .hide();
}
Everybody's fiddling examples :)
$(function($) {
$cnt = 0;
$('.personalDetails ul li').each(function() {
if($(this).hasClass('clear')) $cnt++;
});
if($('.personalDetails ul li').length == $cnt) $('.personalDetails').hide();
});
$("ul li:empty").closest('div#personaldetails').hide();
Sample Code
#personaldetails ul li.clear{
visibility:hidden;
}
I recently work with this Fiddle http://jsfiddle.net/GeJkU/
function divClicked() {
var divHtml = $(this).html();
var editableText = $("<textarea />");
editableText.val(divHtml);
$(this).replaceWith(editableText);
editableText.focus();
// setup the blur event for this new textarea
editableText.blur(editableTextBlurred);
}
function editableTextBlurred() {
var html = $(this).val();
var viewableText = $("<div>");
viewableText.html(html);
$(this).replaceWith(viewableText);
// setup the click event for this new div
viewableText.click(divClicked);
}
$(document).ready(function () {
$("div").click(divClicked);
});
It will replace div tags with textarea when i click the div.
My question is, how can i replace div tags with textarea when i click a button using above javascript?
Any Suggestions?
Assuming, I have understood your question, you can try the below.
HTML: Add a button like below after every div.
<div>If no background color is set on the Element, or its background color is set to 'transparent', the default end value will be white.</div>
<button class='btn'>Edit</button>
jQuery: Modify the code as below.
function divClicked() {
var divHtml = $(this).prev('div').html(); //select's the contents of div immediately previous to the button
var editableText = $("<textarea />");
editableText.val(divHtml);
$(this).prev('div').replaceWith(editableText); //replaces the required div with textarea
editableText.focus();
// setup the blur event for this new textarea
editableText.blur(editableTextBlurred);
}
function editableTextBlurred() {
var html = $(this).val();
var viewableText = $("<div>");
viewableText.html(html);
$(this).replaceWith(viewableText);
// setup the click event for this new div
viewableText.click(divClicked);
}
$(document).ready(function () {
$(".btn").click(divClicked); //calls the function on button click
});
Working Demo
I hope it helps you,
function divClicked(ele) {
var divHtml = $(ele).parent().find('p').html();
var editableText = $("<textarea />");
editableText.val(divHtml);
$(ele).parent().find('p').replaceWith(editableText);
editableText.focus();
// setup the blur event for this new textarea
editableText.blur(function() {
editableTextBlurred(this);
});
}
function editableTextBlurred(ele) {
$(ele).replaceWith($('<p>').html($(ele).val()));
}
$(document).ready(function() {
$(".update").click(function() {
divClicked(this);
});
});
please check the demo version here.
why not place textarea element inside div
$("#button_id").click(function(){
$("#div_id").html('<textarea></textarea>');
})
Have you tried this instead:
$(document).ready(function() {
$("div").click(function(){
divClicked($(this));
});
});
Then change your divClicked function slightly to accommodate the jquery object being passed in:
function divClicked(theObject) {
var divHtml = theObject.html();
var editableText = $("<textarea />");
editableText.val(divHtml);
theObject.replaceWith(editableText);
editableText.focus();
// setup the blur event for this new textarea
editableText.blur(editableTextBlurred);
}
see demo....
html
<div>If no background color is set on the Element, or its background color is set to 'transparent', the default end value will be white.</div>
<div>Element shortcut method for tweening the background color. Immediately transitions an Element's background color to a specified highlight color then back to its set background color.</div>
<div>Element shortcut method which immediately transitions any single CSS property of an Element from one value to another.</div>
<button id="buttonclick">click</button>
js
function divClicked() {
var divHtml = [];
$("div").each(function(){
divHtml.push($(this).html());
var editableText = $("<textarea />");
editableText.val($(this).html());
$(this).replaceWith(editableText);
editableText.blur(editableTextBlurred);
});
editableText.focus();
// setup the blur event for this new textarea
}
function editableTextBlurred() {
var html = $(this).val();
var viewableText = $("<div>");
viewableText.html(html);
$(this).replaceWith(viewableText);
// setup the click event for this new div
viewableText.click(divClicked);
}
$(document).ready(function() {
$("#buttonclick").click(divClicked);
});
css
div {
margin: 20px 0;
}
textarea {
width: 100%;
}
First you should create a button like
<input type="button" value="Click me" id="btn1" />
Then use the following code in your document ready function
$('#btn1').click(function () {
divClicked.call($('div#one'));
});
Note: I have assigned id one to first div.
See working fiddle
You can just try something like this:
function div2text(){
$("#div").replaceWith('<textarea>' + $("#div").html() + '</textarea>');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div onclick="div2text();" id="div" style="margin: 10px; border: 1px solid black; padding: 10px;"><b>I am a div!</b> <u>Click Anywhere On Me!</u></div><br>
<button id="change" onclick="div2text();">Div-2-Textarea</button>
References
To learn more about the .replaceWith method, visit:
https://www.w3schools.com/jquery/html_replacewith.asp
I am trying to change a navigation element from 'ME' to <ME> on hover using JQuery. Here's what I'm trying:
JSBin example
However, it's permanently hiding my original text. Does anyone have an idea as to what I'm doing wrong? (I'm super new to JQuery/ JS in general)
Classical case of no js required, you could use CSS pseudo classes, specifically:
:hover
:before
:after
Example
li a:before {
content: "<";
display: none;
}
li a:after {
content: ">";
display: none;
}
li a:hover:before {
display: inline;
}
li a:hover:after {
display: inline;
}
DEMO
Try this. I have edited your code
$( function() {
var text;
$("#topnav li ").hover(
function () {
text=$(this).find("a").text();
$(this).find("a").text($(this).attr('full'));
},
function () {
$(this).find("a").text(text);
}
);
});
Hope this helps
Thank you
I agree with #Nirazul, if you can, go for a pure css solution.
If you can't, just remember that you are:
obtaining the value a of a attribute of the li
replacing the text of link inside of the selected li with its contents
reversing the operation on handlerOut
So:
$( function() {
$("#topnav li").hover(
function () {
var myLi = $(this);
myLi.attr('small', $('a', myLi).text());
$('a', myLi).text(myLi.attr('full'));
},
function () {
var myLi = $(this);
$('a',myLi).text(myLi.attr('small'));
}
);
});
Updated example.
I have following page in which there is a div menu. Inside menu we can have <table>, <p>, <h>. Different elements for example:
<div id="menu">
<p>abc def</p>
<table>
<tr><td>helloo </td><tr>
<tr><td>hiii </td><tr>
</table>
<div id="sub"><p>123 this is test</p></div>
</div>
Is there a way to change size of all text in between elements inside menu. For example: abc def, hellooo, hiii, 123 this is test. Can i change all that text using jquery or javascript some how.
Yes you can use JavaScript and or jQuery to do what you want, but why wouldn't you just use CSS like suggested?
or you can try this:
<Style>
/*Assumed everything is inheriting font-size*/
#menu{
font:12px;
}
/* Force all children to have a specified font-size */
#menu *{
font:14px;
}
</style>
<script>
//JavaScript
document.getElementById('menu').style.fontSize = "14px";
//jQuery
$("#menu").css({'font-size':'14px'});
</script>
You can do this with css:
#menu {
font-size: XXX;
}
jQuery Example
$('#menu').nextAll().css('font', '14px');
Take a look at this:
http://jsfiddle.net/oscarj24/jdw6K/
Hope this helps :)
var VINCI = {};
VINCI.Page = {
init : function() {
this.initFontResize();
},
initFontResize : function() {
var container = $('#menu, #sub');
var originalFontSize = parseFloat(container.css('font-size'), 10);
var size_level = 0;
var maximum_size_level = 5;
var size_change_step = 1.4;
function calculateFontSize()
{
return originalFontSize + (size_level * size_change_step);
}
// Increase Font Size
$('.increaseFont').click(function(){
if (size_level < maximum_size_level) {
size_level++;
container.stop().animate({'font-size' : calculateFontSize()});
}
return false;
});
// Decrease Font Size
$('.decreaseFont').click(function(){
if (size_level > 0) {
size_level--;
container.stop().animate({'font-size' : calculateFontSize()});
}
return false;
});
};
VINCI.Page.init();
i have the following CSS for a mouse hover event. Im not sure how to refer to the #tabs ul li a:hover from within the Javascript?
#tabs ul li a:hover
{
color: #000;
font-weight:bold;
background-color: #0ff;
}
and i wish to swap the background color line for this Javascript code:
<script type="text/javascript">
hex=255;
function fadetext(){
if(hex>0) {
hex-=11;
document.getElementById("#tabs ul li a:hover").style.color="rgb("+hex+","+hex+","+hex+")";
setTimeout("fadetext()",50);
}
else
hex=255;
}
</script>
This:
document.getElementById("#tabs ul li a:hover")
isn't valid syntax, you only need to specify the id there:
document.getElementById("tabs")
You can change the style of an element on hover something like this:
var elem = document.getElementById("id");
elem.onmouseover = function(){
// your code
};
Let's suppose you have assigned the id myid to your link, you can do the stuff for that like this:
var elem = document.getElementById("myid");
elem.onmouseover = function(){
elem.style.backgroundColor = 'color value';
elem.style.color = 'color value';
};
Update:
Since in your code you are using loadit(this) in onclick event, you don't need to use document.getElementById because element is already referenced with this keyword, also you may want to use the onmouseover event instead of click event if you want to something to happen when element is hovered like:
<li><a href="tab-frame-workexperience.html" target="mainFrame" onmouseover="loadit(this)" >Work experience</a></li>
and then your function should look like this:
function loadit(elem)
{
elem.style.color = 'color value';
}
and/or you can create the two functions for two events if you want.
Note also that you can use jQuery to do it easily and in unobstrusive fashion with hover method:
$(function(){
$('#tabs ul li a').hover(function(){
$(this).css('color', '#ff0000'); // this fires when mouse enters element
}, function(){
$(this).css('color', '#000'); // this fires when mouse leaves element
}
);
});
Do you mean like this? This didn't work...
#tabs ul li a:hover
{
color: #000;
font-weight:bold;
<script type="text/javascript">
hex=255;
var elem = document.getElementById("tabs");
elem.onmousehover = function fadetext(){
if(hex>0) {
hex-=11;
elem.style.color="rgb("+hex+","+hex+","+hex+")";
setTimeout("fadetext()",50);
}
else
hex=255;
}
</script>
}
One solution is to edit your stylesheet instead of changing the style of every element, this can be done with a simple one-liner:
document.styleSheets[0].insertRule("#tabs ul li a:hover{rgb(255, 255, 255);}", 0);
Where the second argument specifies that the rule should be inserted first in the stylesheet.
For IE this is done with the addRule function instead:
document.styleSheets[0].addRule("#tabs ul li a:hover", "rgb(255, 255, 255)");
Update:
In your case, it would mean replacing this row:
document.getElementById("#tabs ul li a:hover").style.color="rgb("+hex+","+hex+","+hex+")";
with
var ss = document.styleSheets[0]; //gets the first external stylesheet in your document
if(ss.insertRule) //checks browser compatibility
ss.insertRule("#tabs ul li a:hover{rgb("+ hex + ", " + hex + ", " + hex + ");}", 0);
else
ss.addRule("#tabs ul li a:hover", "rgb("+ hex + ", " + hex + ", " + hex + ")");