CODEWITHSUNDEEP
jqueryhtmlcss
Mr.Happy
Mr.Happy

Reputation: 2647

How to change float opposite value using jQuery

I am having following HTML/CSS structure.

CSS: 

<style>
    #main {
        width: 100%;
    }

    #main-title {
        background-color: #b5dcb3;
        width: 100%
    }

    #menu {
        background-color: #aaa;
        height: 200px;
        width: 100px;
        float: left;
    }

    #right-menu {
        background-color: #aaa;
        height: 200px;
        width: 100px;
        float: right;
    }

    #content {
        background-color: #eee;
        height: 200px;
        width: 350px;
        float: left;
    }

    #footer {
        background-color: #b5dcb3;
        clear: both
    }
</style>

HTML:

<div id="main">
    <div id="main-title">
        <h1>This is Web Page Main title</h1>
    </div>
    <div id="menu">
        <div><b>Main Menu</b></div>
        HTML
        <br /> PHP
        <br /> PERL...
    </div>
    <div id="content">
        <p>Technical and Managerial Tutorials</p>
    </div>
    <div id="right-menu">
        <div><b>Right Menu</b></div>
        HTML
        <br /> PHP
        <br /> PERL...
    </div>
    <div id="footer">
        <center>
            Copyright Area
        </center>
    </div>
</div>

Now I want to apply mirror effect like WHERE float:left is changed to float:right and same reverse WHERE float:right is changed to float:left.

Code sample: http://jsfiddle.net/mananpatel/mw1sxpx0/

Note: I am keeping on different file for float:left class and float:right class.

Any idea how to do this with jQuery code on page load.

Upvotes: 5

Views: 11407

Answers (3)

Itisha-systematix
Itisha-systematix

Reputation: 165

We can give various attribute using .css we should know Id (elementId)only

$('#elementId').css({ 'height': '70px', 'width': '280px', 'display': 'inline-block', 'float': 'left', });

Upvotes: 0

user4881323
user4881323

Reputation:

You can create different classes as 

.floatright {
float: right;
}
.floatleft {
float: left;
}

and include this wherever applicable. On document ready function() you can write

$('.floatright').css('float','left');
$('.floatleft').css('float','right');

This will be a solution i guess.

Will check for other solutions and let you know if found.

Another method : Try this code.

$("*").filter( function() {
if(/^(left)$/.test( $(this).css("float") )) {
$(this).css("float","right");
}

else if(/^(right)$/.test( $(this).css("float") )) {
$(this).css("float","left")
}
});

Upvotes: 1

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

Try this : You can change css style properties of the menu like below

$(function(){
   $('#menu').css('float','right');
    $('#right-menu').css('float','left');
});

JSFiddle Demo

Upvotes: 2

Related Questions