We help IT Professionals succeed at work.

Add image in the reaize jauery ui layout

Rocking
Rocking asked
on
572 Views
Last Modified: 2014-05-22
hi,

I need to add image left and right arrow in the re size bar so that when the user click left it collapse to left and when user clicks on right collpases to right

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Layout Example</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://layout.jquery-dev.net/lib/js/jquery.layout-latest.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {

         // code to change the size of east pane
        $('body').layout({ applyDemoStyles: true }).sizePane('east', 500);

        // Code to change the content of north pane
        $('.ui-layout-north').html('some new content to replace...');
    });
</script>
</head>
<body>
<div class="ui-layout-center">Center
	<p><a href="http://layout.jquery-dev.net/demos.html">Go to the Demos page</a></p>
	<p>* Pane-resizing is disabled because ui.draggable.js is not linked</p>
	<p>* Pane-animation is disabled because ui.effects.js is not linked</p>
</div>
<div class="ui-layout-north">North</div>
<div class="ui-layout-south">South</div>
<div class="ui-layout-east">East</div>
<div class="ui-layout-west">West</div>
</body>
</html>

Open in new window

Comment
Watch Question

Top Expert 2014

Commented:
Hello Again...

Try below HTML code.. I hope this is what you are expecting.. As an initial start, I have written cod only for West pane..

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Layout Example</title>
<!--    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://layout.jquery-dev.net/lib/js/jquery.layout-latest.min.js"></script>-->

    <script src="Scripts/jquery.min.js"></script>
    <script src="Scripts/jquery.layout-latest.min.js"></script>

     <style type="text/css">
        .ui-layout-resizer {
            background-color: grey !important;
        }
    </style>

<script type="text/javascript">
    $(document).ready(function () {

        $('body').layout({ defaults: { applyDefaultStyles: true } }).sizePane('north', 100);

        /* Code block to change West Pane content & respective sizes on Initial Page Load */
        $('.ui-layout-resizer-west').width(10);
        $('.ui-layout-toggler-west').width(10);

        $('.ui-layout-toggler-west').css('height', '10px');

        $('.ui-layout-center').css('left', $('.ui-layout-pane-west').outerWidth() + 10 + 'px');
                
        /* Yo can also use below code to create img icons
        $('<div />', {
            id: "divWestContainer",
            style: "width:10px; height: 10px;"
        }).appendTo('.ui-layout-toggler-west');

        $('<img />', {
            src: "../images/back.png",
            style: "width: 100%; height: auto"
        }).appendTo('#divWestContainer');
        */

        $('.ui-layout-toggler-west').html('<div style="width:10px; height: 10px;"><img src="../images/back.png" style="width: 100%; height: auto" /></div>');

        /* Code block to change Pane content & respective sizes on Click of West Panes */
        $('.ui-layout-toggler-west').on('click', function (e) {

            $('.ui-layout-resizer-west').width(10);
            $('.ui-layout-toggler-west').width(10);

            $('.ui-layout-toggler-west').css('height', '10px');

            if ($(this).hasClass('ui-layout-toggler-closed')) {
                
                $('.ui-layout-toggler-west').html('<div style="width:10px; height: 10px;"><img src="../images/front.png" style="width: 100%; height: auto" /></div>');

                $('.ui-layout-center').css('left', '10px');
            }
            else {
                $('.ui-layout-toggler-west').html('<div style="width:10px; height: 10px;"><img src="../images/back.png" style="width: 100%; height: auto" /></div>');

                $('.ui-layout-center').css('left', $('.ui-layout-pane-west').outerWidth() + 10 + 'px');
            }
        });

        /* Code to change the content */
        $('.ui-layout-north').html('some new content to replace...');
    });
</script>
</head>
<body>
<div class="ui-layout-center">Center
	<p><a href="http://layout.jquery-dev.net/demos.html">Go to the Demos page</a></p>
	<p>* Pane-resizing is disabled because ui.draggable.js is not linked</p>
	<p>* Pane-animation is disabled because ui.effects.js is not linked</p>
</div>
<div class="ui-layout-north">North</div>
<div class="ui-layout-south">South</div>
<div class="ui-layout-east">East</div>
<div class="ui-layout-west">West</div>
</body>
</html>

Open in new window


I have used attached arrow images.

Anyways, you can get your like front & back arrow images from google & use them for above code.

Please let me know if you require any further help here.
front.png
back.png

Author

Commented:
thanks for the code. but what i need was two images should be coming in the resize bar "<" and ">" so that when user clicks on the "<" button it collapses in the left direction and when user clicks ">" it collapses to right direction meaning to say give user the preference of his choice for collapse.

In the current scenario there is only one way i.e collapse on the left only.
Top Expert 2014

Commented:
Good Morning !!

Ok Understood.. Will get back to you shortly..

Author

Commented:
????
Top Expert 2014

Commented:
Hello Rocking,

I regret for the delay response !!!

As you also agree that the current question is has no direct or  predefined answer to it. The sample solution which I have provided in my earlier post has taken one nights work. This question has gone beyond 500pts, its something like a free lancers work.

I thought to work on this during weekend but I was busy with Live projects in my hand.

I will definitely TRY if I can complete it in this weekend. Or lets hope that some fellow expert chips in and work on its resolution.

Once again, regret for inconvienience.

Good Luck !
Top Expert 2014

Commented:
I was just going through earlier posts to recall and I have a doubt in your last post ID: 40049212.

You are stating that you require 2 arrow images in a pane. Lets take West pane slidebar has two image. Now if user clicks '>' image slidebar must collapse towards east side of the page & if user clicks '<' image then slidebar must collapse to west side of the page.

Is this what you are expecting ???

If so then sorry to say its not possible. West Pane Slidebar will collapse towards WEST side of page only respectively other panes functionality too.

It is something going against what jQuery UI has  defined pane functionality. I can customize by adding some ammendments to it like adding images; such stuff but I can't customize to go against the functionality.

If you really want it that way then I suggest you to create your own customized JQuery functionality (its possible) instead of going towards default jQuery UI plug-in.

Attached is the final code snippet what I can provide you now having single image & with default slidebar collapse functionality.

Good Luck !!!
PaneWithImages.html
Top Expert 2014
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.