I am new to javascript. I want to make a button in html using javascript. When user try to press the button
the specific <#id> is going to be "Bold" and press again to "Unbold".
How can I do this ? please refer any helping material.
Thanks !
Since the learning experience is vital, especially for Javascript, I'll guide you in the right direction.
First, you should look into event binding and mouse event handling with jQuery. You can do some powerful stuff with this knowledge, including what you would like to do.
Second, look into basic jQuery selectors. It's not hard to learn the simple CSS-based selectors that you can use to select your desired id.
Third, look at the css() function of jQuery, which falls under jQuery's CSS category. You can use this to set different properties of elements, including font weight.
I am guessing, you are trying to build something like RTE, So, applying class to give bold effect would be better and efficient solution to this.
It can be done as simple as this
$(".boldtrigger").click(function() { //boldTrigger being the element initiating the trigger
$(".text").toggleClass("bold"); //text being the element to where applied to it.
});
CSS
.bold { font-weight: bold; }
Demo
JQuery's toggle() method should take care of this.
$('#foo').toggle(function() {
$('#bar').css('font-weight', 'bold');
}, function() {
$('#bar').css('font-weight', 'auto');
});
When you click #foo, it will do the next function in sequence, so this is exactly what you want.
here's another question that uses the .toggleClass for a vice versa effect. you need to create a class for that certain element since it adds and switches classes back and forth.
Using JQuery to toggle between styles
for a one way change:
$('button_selector').on('click',function(){
$('item_to_bold_selector').css('font-weight','bold');
});
references for this:
selectors
.on for event handling
.css for adding styles on the go
here is the code to bold & unbold text
<div id="contentDiv">
content of the page.
</div>
<input type="button" value="Bold" id="font-button"></input>
jQuery("#font-button").on("click",function(){
var button = $(this);
var contentDiv= $("#contentDiv");
if(button.val() == "Bold"){
contentDiv.css("font-weight","bold");
button.val("UnBold");
}else{
contentDiv.css("font-weight","normal");
button.val("Bold");
}
});
DEMO
$('button_selector').on('click',function(){
var itemToBold = $('item_to_bold_selector');
if (itemToBold.css('font-weight') == 'bold') {
$('item_to_bold_selector').css('font-weight','normal');
} else {
$('item_to_bold_selector').css('font-weight','bold');
}
});
Based off of Joseph's answer, but with the unclick criteria.
Since you tagged this post with jQuery I assume you are looking for a jQuery approach.
If you want to use a CSS class to add the bold style, I recommend you look at using toggleClass: http://api.jquery.com/toggleClass/
Lots of samples on that page...
I like using toggleClass() (API reference)
$("#button").click(function(){
$("#element").toggleClass("bold");
});
If it has ".bold" when clicked it will unbold and vice versa.
Related
I'm working on a popup menu for mobile devices and would like for the website to blur and lighten in opacity when the menu pops up and go back to normal when it's closed. I figured a good way to go about doing it would be by triggering a css filter which led me to be unsure of the proper syntax to use in JQUERY. I looked into the matter more and so far I haven't been able to find examples of css filters being triggered in jquery so I continued playing with it to see if I could get it to work and so far have been unsuccessful.
Here are the scripts I came up with.
$("#menu").click(function(){
$("#popup").fadeIn('slow');
$("#close").css("display", "block");
$("#menu").css("display", "none");
$("p").css("opacity", 0.33);
);
$("#close").click(function(){
$("#popup").fadeOut('slow');
$("#close").css("display", "none");
$("#menu").css("display", "block");
$("p").css("opacity", 1);
});
The way I was trying to add in the css filter is
//This one shows no sign of the blur working but opacity works
$("p").css({"opacity": "0.33",
"filter": "blur(88%)",
"-webkit-filter": "blur(88%)",
"-moz-filter": "blur(88%)"
});
//These two break the whole code from working at all
$("p").css({"opacity": "0.33",
"filter: blur(88%)",
"-webkit-filter: blur(88%)",
"-moz-filter: blur(88%)"
});
$("p").css({"opacity": "0.33",
"filter: blur()" "88%",
"-webkit-filter: blur()" "88%",
"-moz-filter: blur()" "88%"
});
Of course these are attempts to create the blur which I added to the "menu" button. Here's a fiddle of it https://jsfiddle.net/Optiq/hsvvpfzu/5/
The more I looked and couldn't find anything made me wonder if this is at all possible. Maybe it's just me not knowing specific enough stuff to search for in order to find something relevant. Any source of info talking about using css filters in jquery are welcome.
UPDATE
The fiddle just simulates the code I've been working with on my site so it wasn't clear as to the element I was trying to effect. I have each page wrapped in a div that has a class name but no id. The reason I didn't give it an id is because I use it over and over on each page, so I figured it would be cleaner to just use the jquery to target the class and add attributes that way rather than giving each div a unique id then passing them all into a variable or something.
Of your three examples, the first one uses the correct syntax. The problem is that blur doesn't accept percentage values, only pixels. Defining them as pixels as such appears to have the desired effect for me:
$("p").css({
"opacity": "0.33",
"filter": "blur(1px)",
"-webkit-filter": "blur(1px)",
"-moz-filter": "blur(1px)"
})
Hope this helps! :)
Why not you assign and remove clss instead of css, implement with class is better one, you can also assign CSS but it require more code.
$(document).ready(function(){
$("p").addClass("myClass");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.myClass{
opacity: 0.33;
filter: blur(88%);
-webkit-filter:blur(88%);
-moz-filter: blur(88%);
color:red;
}
</style>
<p>Sandip Patel</p>
I have a large Joomla CMS Website I'm working on.
Problem: I need to hide a menu tab globally across the entire site. The menu item I need to have does not have a unique ID or class; but instead shares the same class as the other tabs I need to keep on the page. 70% of the tab I need to remove shows in 4th order so I started with the below.
.tabs:nth-of-type(4)
{
display:none !important;
}
But! Seeing as how the rest is in different order, this wont work. The tab in question I need to remove looks like the below across the mark-up.
Update: This is what I currently have via the suggestions below but it isn't working:
$(document).ready(function() {
$('.djaccTitle:contains("Location").css( "display: none;" )')
});
<span class="tabs">Location</span>
Is there a way to write an if statement or similar lightweight solution that can sniff out text content within the class, so if it says Location, then hide?
I would like to find a solution like this, as opposed to going through 1000 files of mark-up removing manually. Cheers for any pointers
Update: This is what I have via the current suggestions below but it isn't working!
$(document).ready(function() {
$('.tabs:contains("Location").css( "display: none;" )')
});
I do not believe what you are asking for exists with pure CSS at this time.
What I would do is use jQuery's :contains() selector:
$('span.tabs:contains("Location")')
or even better:
$('#idOfTabsContainer span.tabs:contains("Location")')
And of course, don't forget to put this in a document.ready to ensure that your DOM element has been loaded successfully:
$(document).ready(function() {
$('#idOfTabsContainer span.tabs:contains("Location")')
});
Jquery :contains() Selector should work. I think you have an error in .css() function syntax.
Please try with:
jQuery(document).ready(function(){
$( '.tabs:contains("Location")' ).css( 'display', 'none' );
});
Hope this helps
There used to be a :contains selector that they were going to add to CSS.
But alas, you may have to resort to some JS, as addressed already here
jQuery's got your back though:
$('.tabs:contains("Location")')
Problem: I need to hide a menu tab globally across the entire site.
Solution 1: Disable the menu item. Boom, it is gone from your menus, site wide.
Solution 2: Hide the menu item with css by adding a unique class to the menu item itself and then hiding it with css.
.hide-me-with-css {display: none;}
I'm a bit new to jQuery and I have difficulties in achieving a function so I really hope somebody could guide me a bit. What I basically want to do is to highlight 2 elements simultaneously (via toggleClass).
Basically I have a repeating div (#post) which contains a title, thumb and description div. What I would like to do is once I hover on the title or the thumb div the elements to get a new additional class (xxxHover). So basically once the user hovers the mouse on the title/thumb div the title/thumb div (both of them) get a new class called (xxxHover where xxx stands for the div name - in this case titleHover/thumbHover).
I might not be the best in explaining so I've prepared a jsFiddle as well:
http://jsfiddle.net/yLqnd/12/
As you can see my problem is to restrict the scripts for the current element only (#post in our case). If it helps or matter I have to say that this will be integrated into a WordPress website (so the HTML structure is basically in the loop.php), that's why I would like to restrict the 2x highlight effect only per item (#post).
Thanks a mill in advance for any idea!
http://jsfiddle.net/oscarj24/yLqnd/13/
Here's an updated jsFiddle:
Instead of being so specific, any div's inside will now toggle the class
jsFiddle Link
Basically I pushed it all together:
$(".post div").mouseover(function(){
$(this).closest('.post').find('div').toggleClass('thumbHover');
}).mouseout(function(){
$(this).closest('.post').find('div').toggleClass('thumbHover');
});
I think you can get the effect you're looking for by using .siblings() in jQuery.
$(".title").mouseover(function(){
$(this).toggleClass("titleHover");
$(this).siblings(".thumb").toggleClass("thumbHover");
});
This will limit the toggleClass to only the .thumb that resides in the same .post.
http://api.jquery.com/siblings/
simples, just do it on the parent of both elements:
$(".post").mouseover(function(){
$(this).find('div').toggleClass('thumbHover');
}).mouseout(function(){
$(this).find('div').toggleClass('thumbHover');
});
I have the following javascript code:
$('#s2 a').click(function(){
var cB = $(this);
var f = parseInt(cB.attr('data-f'));
var r = parseInt(cB.attr('data-r'));
var c = parseInt(cB.attr('data-c'));
if (pA == false && !isClickAllowed(f,r,c)) {
return false;
}
// more stuff comes here
}
This makes a link not clickable. This all works. I also want to remove the hover effect. The CSS code for this is:
.pc a:hover {
background-color: #FFF;
I thought removing the class would do it like: cB.removeClass('pc'); but this doesn't work.
Any suggestions on how to do this?
Thank you for your time
--EDIT--
Hmm I think I see why it aint working. At the top of the document I have this:
$(document).ready(function() {
setScale();
$(window).resize(setScale);
if (!('ontouchstart' in document)) {
$('body').addClass('pc');
}
more code here
This sets the .pc a:hover for all links when opened the page on a pc rather then a touch device (e.g. iPad). I need to disable this pc hover ONLY on the links are not clickable like in:
if (pA == false && !isClickAllowed(f,r,c)) {
return false;
}
Hope this helps!
cB is the anchor which isn't being references by the CSS class you indicate, the parent would have the class pc for this to work. cB.parent().removeClass('pc'); would do it.
-- EDIT --
Following the erudite comments below it would seem that cb.parents('.pc').removeClass('pc') or cb.parents().removeClass('pc') (I've not benchmarked to see which is quicker) would be the comprehensive solution.
Good catch to James, Anthony, and Tadeck!
-- EDIT 2 --
Following the question update, I'd suggest adding another class to your links, i.e. clickable, then your CSS becomes:
.pc a.clickable:hover {
background-color: #FFF;
and you can just remove the clickable class on those links that you don't want to show the highlight. The better course of action may be to simply replace the links that are disabled with either raw text or as spans with an identifying class, i.e. disabled_link if you want to have the option to enable them later.
Though there was no HTML provided, based on the code, cB does not appear to be the element which has the class of pc but rather an ancestor of cB. You would need to remove the class from that.
If the direct parent is the only ancestor with the class of pc, you can do the following:
cB.parent().removeClass("pc")
If only one ancestor other than the direct parent has the class of pc and the parent does not, you can do the following:
cB.closest(".pc").removeClass("pc")
If multiple ancestors have the pc class, you can use the following:
cB.parents(".pc").removeClass("pc")
And finally, if multiple a tags exist within .pc then you cannot use the approach of removing the class, as this will affect all a tags within that .pc.
cB.removeClass('pc') should indeed remove aclass. Make sure your css behaves correctly in all scenarios. Also try targeting the parent
I would add a disabled class to the CSS that comes after the :hover rule and overrides it with the disabled styles, which may or may not be the default. Then, you can just do:
cB.addClass('disabled');
The reason your existing solution doesn't work is because you're removing the class from the element when its parent has the class.
Since your CSS issue was already solved, I want to point out another improvement:
I see that you are using cB.attr('data-f') to store some data, but attr should only be used for valid HTML attributes. You should consider using the jQuery data method which was created just for the purpose of storing non-attribute data into an element.
http://api.jquery.com/jQuery.data/
<p id="example">This is an example.</p>
<script>
document.getElementById('example').style.borderWidth = '4px';
</script>
Note that borderWidth is different than border-width. This can be used for the other styles. As a rule of thumb, take away the dash and make the first letter of the second word capital. If it doesn't work, Google it.
I tried some plugins but they all come with their own styling which takes quite some time to get rid of. Is there any plugin with minimal styling (or a really simple way) to apply custom background to select element? I just need something very simple.
Thanks
I found this one. It even degrades automatically if JavaScript is disabled.
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
With jQuery am using lines like this in my dom ready function :
$(".overlay").css("top","300px");
Goes like this in the header:
<script type="text/javascript">
jQuery(document).ready(function(){
$(".overlay").css("backgroundColor": "#0f0");
});
</script>
.overlay is the class of the div i wanna change and then comes the css property and its value.
Hope this helps.