Avatar of Rocking
Rocking
 asked on

Add image in the reaize jauery ui layout

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

JavaScriptjQueryHTML

Avatar of undefined
Last Comment
Md Shah

8/22/2022 - Mon
Md Shah

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
Rocking

ASKER
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.
Md Shah

Good Morning !!

Ok Understood.. Will get back to you shortly..
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
Rocking

ASKER
????
Md Shah

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 !
Md Shah

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
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER CERTIFIED SOLUTION
Md Shah

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question