jQWidgets Forums

Forum Replies Created

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts

February 4, 2014 at 8:06 am in reply to: How to determine the size of the splitter during resize? How to determine the size of the splitter during resize? #48909

browserspot

Participant

Hi Peter,
Is there any other way or may be can you suggest a work around to find the size of the splitter while the splitter tab/bar is being moved (by the mouse)? I am looking for a solution where when the splitter bar has the events mousedown+mousemove, the current position of the splitter bar will be displayed.

In this example:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxsplitter/jquery-splitter-events.htm

the sizes of the panels are displayed only when the splitter bar is released. Is there a way we can show the sizes in real-time while the splitter is being moved left/right?

Thanks.

September 17, 2013 at 3:54 pm in reply to: How do I achieve the following two layouts? How do I achieve the following two layouts? #29138

browserspot

Participant

Thank you, Dimitar! You are awesome!

September 17, 2013 at 3:53 pm in reply to: How do I create a full quadrant layout like this? How do I create a full quadrant layout like this? #29137

browserspot

Participant

Understood. Thank you, Dimitar!

August 28, 2013 at 5:35 am in reply to: Color change for split bar issue Color change for split bar issue #27831

browserspot

Participant

never mind. I just found the solution. It seems to do that I need to style the border for left, right, top and bottom.

.jqx-fill-state-normal {background-color: white; border-top:1px solid red; border-bottom:1px solid green; border-left:1px solid red; border-right:1px solid green; }

Thank you!

August 28, 2013 at 5:15 am in reply to: Color change for split bar issue Color change for split bar issue #27830

browserspot

Participant

Thank you Dimitar!

I do have another question….

How do I change the border colors of the splitter. Please see the example below…for some reason the borders of the horizontal splitter works but the vertical ones don’t. Is there an order in which the styling needs to be done? If so, can you share it with me. Thank you!


<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="css/jqx.base.css" type="text/css" />
	<link rel="stylesheet" href="css/jqx.summer.css" type="text/css" />
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="javascripts/jqxcore.js"></script>
    <script type="text/javascript" src="javascripts/jqxsplitter.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
		
		totalScreenHeight = $(window).height();
		totalSplitterHeight=totalScreenHeight-70;
		
		totalScreenWidth = $(window).width();
        $('#splitContainer').jqxSplitter({ height: '100%', width: '100%', orientation: 'vertical', panels: [{ size: '50%' }, { size: '50%'}] });
		$('#leftSplitter').jqxSplitter({ height: '100%', width: '100%', orientation: 'horizontal',panels: [{ size: '50%' }, { size: '50%'}] });
		$('#rightSplitter').jqxSplitter({ height: '100%', width: '100%', orientation: 'horizontal', panels: [{ size: '50%' }, { size: '50%'}] });
		   
        });
    </script>
    <style type="text/css">
        html, body
        {
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
        }
		
		
<!-- Maintain this order -->
.jqx-fill-state-pressed{ }
.jqx-fill-state-normal {background-color: white; border-top:1px solid red; border-bottom:1px solid green; }
.jqx-fill-state-hover { background-color: red;}	   	
.jqx-splitter-collapse-button-vertical { background-color: black;}
.jqx-splitter-collapse-button-horizontal { background-color: black;}
<!-- Slider color (Hover) -->
	
    </style>
</head>
<body>
   <div id="splitContainer">
                <div>
                    <div id="leftSplitter">
                        <div>
                           one
                        </div>
                        <div>
                           two
                        </div>
                    </div>
                </div>
                <div>
                    <div id="rightSplitter">
                        <div>
                           three
                        </div>
                        <div>
                           four
                        </div>
                    </div>
                </div>
            </div>                 
</body>
</html>

August 16, 2013 at 6:16 am in reply to: How to keep space for header and footer (window resize issue)? How to keep space for header and footer (window resize issue)? #26922

browserspot

Participant

Peter,
You are amazing! Thank you!

jqWidgets is a really great library. I will recommend to anybody who is looking for a comprehensive jquery library. However, I think you need to market this a little more, especially in America. May be also make the website look sleeker…something like Sencha . I am sure it will be a success. Good luck to you and your team! Again, thank you for the great work!

August 16, 2013 at 3:31 am in reply to: How to keep space for header and footer (window resize issue)? How to keep space for header and footer (window resize issue)? #26913

browserspot

Participant

Hi Peter,
Thank you for your response.

The solution (in the link you provided) only puts the footer at the bottom. If you populate the divs, in this case “left panel”, or “bottom-right panel”, the text flows behind the footer and gets hidden. Is there a way to fix this? Here’s the code…

    
    
        $(document).ready(function () {
		
        $('#splitContainer').jqxSplitter({ height: '100%', width: '100%', orientation: 'vertical',  panels: [{ size: '50%' }, { size: '50%'}] });
		$('#leftSplitter').jqxSplitter({ height: '100%', width: '100%', orientation: 'horizontal',panels: [{ size: '50%' }, { size: '50%'}] });
		$('#rightSplitter').jqxSplitter({ height: '100%', width: '100%', orientation: 'horizontal',panels: [{ size: '50%' }, { size: '50%'}] });
		   
        });
    
    
        html, body
        {
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
        }
    
<div style="width: 100%;height: 50px;background: cyan">
        Header
    </div>
    <div style="padding-top: 50px;padding-bottom: 50px;width: 100%;height: 100%">
       <div>
            <div>
                <div>
                    <div>
                       one
                    </div>
                    <div>
                       Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                    </div>
                </div>
            </div>
            <div>
                <div>
                    <div>
                       three
                    </div>
                    <div>
                       Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                    </div>
                </div>
            </div>
        </div>         
      </div>
      <div style="background: lightgreen;width: 100%;height: 50px">
        Footer
    </div>

Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)