CODEWITHSUNDEEP
jqueryhtmlcssjquery-ui
Nitish Kumar
Nitish Kumar

Reputation: 93

How can we add custom css with jquery?

I've a webpage with couple of css files. I'm trying to build a jquery popup box where I can customize fonts, size, spacing etc. I've designed the popup box only the implementation is left out. Can anyone guide me how can we perform this action, is there any set of jquery codes which sends to custom css attributes and override the previous values.

$(function() { // DOM loaded    
       var mouseX;
       var mouseY;
       $(document).mousemove(function(f){
           mouseX = f.pageX;
           mouseY = f.pageY;
        });
       
       var openPopup = function(e) { // Function to open the popup
                $(e).fadeIn(400);
                $('#mask, .popupinfo').fadeIn(400).css({'top':mouseY, 'left':mouseX}).draggable({ containment: "body" });
                $('#mask').css({'top': 0, 'left': 0});
            };    

        var closePopup = function() { // Function to close the popup
                $('#mask, .popupinfo').fadeOut(400);
        };
       $('body').click(function(){
           $('a.open').css({'top':mouseY, 'left':mouseX}).fadeIn(400).click(function(e){
                e.preventDefault();
                var popupbox = $(this).attr('href');
                openPopup(popupbox);
               $('#editable').attr('contenteditable','true');
               
            });
       });
       $('#mask').on('click', function() {
                closePopup();
       });

            $(document).keyup(function(e) {
                if (e.keyCode == 27) {
                    closePopup();
                }
            });    
       });
 body {
        background: #e2e2e2;
        margin: 0px;
        padding: 0px;
        color: #fff;
    }

    .popupinfo {
       display: none;
        background: #e2e2e2;
        padding: 15px;
        
        float: left;
        font-size: 1.2em;
        position: fixed;
        
        width: 300px;
        margin: -100px 0 0 -100px;
        z-index: 99999;
        box-shadow: 0px 0px 4px #1852fd;
        -moz-box-shadow: 0px 0px 4px #1852fd;
        -webkit-box-shadow: 0px 0px 4px #1852fd;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    }

    #mask {
        display: none;
        background: #9ACD32;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 88888;
        width: 100%;
        height: 100%;
        opacity: 0.2
    } 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<body>


    <div id="mask"></div>

    <div class="clearfix">
        <a href="#popup-box" style="display: none;" class="btn btn-circle btn-sm default open">
            Open <i class="fa fa-user"></i>
        </a>
    </div>
    <div id="editable">This is the content editable where I can change fonts and edit text</div>
     <div id="popup-box" class="popupinfo" data-nitseditor="1">
         <div class="portlet box blue">
						<div class="portlet-title">
							<div class="caption">
								<i class="fa fa-gift"></i> Text Editor
							</div>
							<div class="tools">
								<a href="" class="remove">
								</a>
							</div>
						</div>
						<div class="portlet-body form">
							<form role="form">
								<div class="form-body">
									<div class="form-group">
										<label>Style Select</label>
										<div class="input-group">
											<span class="input-group-addon input-circle-left">
											<i class="fa fa-magic"></i>
											</span>
											<input type="text" class="form-control input-circle-right" placeholder="Select style">
										</div>
									</div>
                                    <div class="form-group">
										<label>Style font</label>
										<div class="input-group">
											<span class="input-group-addon input-circle-left">
											<i class="fa fa-font"></i>
											</span>
											<input type="text" class="form-control input-circle-right" placeholder="Select font">
										</div>
									</div>
                                    <div class="form-group">
                                        <div>Font Size (px)</div>
                                        <div id="slider-range-min" class="slider bg-yellow">
											</div>
								        <div class="slider-value">
												 Minimum Value: <span class="slider-value" id="slider-range-min-amount">
												</span>
										</div>
                                    </div>
									<div class="form-group">
										<label>Left Icon(.input-sm)</label>
										<div class="input-icon input-icon-sm">
											<i class="fa fa-bell-o"></i>
											<input type="text" class="form-control input-sm" placeholder="Left icon">
										</div>
									</div>
									<div class="form-group">
										<label>Left Icon(.input-lg)</label>
										<div class="input-icon input-icon-lg">
											<i class="fa fa-bell-o"></i>
											<input type="text" class="form-control input-lg" placeholder="Left icon">
										</div>
									</div>
									<div class="form-group">
										<label>Dropdown</label>
										<select class="form-control">
											<option>Option 1</option>
											<option>Option 2</option>
											<option>Option 3</option>
											<option>Option 4</option>
											<option>Option 5</option>
										</select>
									</div>
								</div>
							</form>
						</div>
					</div>
    </div>

    </body>

I know code is bit messy. Sorry about that.

Upvotes: 2

Views: 5178

Answers (3)

Madan Bhandari
Madan Bhandari

Reputation: 2184

You can add css by jQuery in two ways

  1. Add css to your element

    $('css_selecttor').css('css_property' : 'property_value', 'css_property' : 'property_value');

  2. By adding class defined in css means you can add class written in css file by jquery

    $('your_element').addClass('css_class_name');

Upvotes: 0

Sameera Madushanka
Sameera Madushanka

Reputation: 87

You can apply css as an object. So you can define your object in your javascript like this:

var my_css_class = { backgroundColor : 'blue', color : '#fff' };

And then simply apply it to all the elements you want:

$("#myelement").css(my_css_class);

You can reuse this function for other objects......

Upvotes: 3

Gomzy
Gomzy

Reputation: 431

To set a specified CSS property, use the following syntax:

css("propertyname","value");

To set multiple CSS properties, use the following syntax:

css({"propertyname":"value","propertyname":"value",...});

Upvotes: 1

Related Questions