I have a page where I have three panels...left panel,center panel,right panel...My question is this...I have a link in my center panel and that link takes to another page...But I want the new page to be displayed in the center panel with the condition that left and right panel should remain as such...I am able to display the 2nd page in center panel but I am not able to hold back the left and right panel...
My code:
<div id="wrapper">
<div id="centerPanel">
center panel
View Appeals
</div>
</div>
<div id="leftPanel">
leftpanel
</div>
<div id="rightPanel">
rightpanel
</div>
Here is one way of doing it, although it may not be what you're looking for.
I made a div for each page like so for the content:
<div id="pagewrap" style="">
<!---------------Home Page--------------->
<div id="Content1">
<object id="dHome" data="home.html" style="overflow:hidden;margin:5px;">
</object>
</div>
<!----------------Gallery Page--------------->
<div id="Content2">
<object id="dGallery" data="gallery.html">
</object>
</div>
</div>
and so on...
As you can see above, I used objects as my pages to load external html data.
I set the width of the wrapper - pagewrap to the sum of the widths of all the pages, and used Jquery to move the pages to the left or right, depending which button was clicked.
Here is the code when paging to the right:
$('#pagewrap').animate({'marginLeft' : "-=650px"},200);
and left:
$('#pagewrap').animate({'marginLeft' : "+=650px"},200);
The above 650px is the with of all my content pages.
Or you could just change the source file of the object!
Hope this helps
Related
I'm using iframes inside pop-ups to show other parts of the same page (long text) that the links that trigger them are in. The problem is that if you click another such pop-up link inside that iframe, the new chosen portion of the page will take the entire iframe instead showing inside a new smaller responsive pop-up. Is there any standard workaround to this? The code is very simple:
<a class="internal_linkpopup" target="base" href="page1.html#internal_anchor" >xx_partofthepage</a>
<div class="modal-header">
<span class="close">close</span>
<center><span class="expand">expand</span></center>
</div>
<div class="modal-body">
<iframe frameborder="3" scrolling="yes" width="100%" style="height: 100vh;" name="base" id="ifrm">
Your browser doesn't support iframes.
</iframe>
</div>
I understand the problem, as described and answered here.
I have quite a complicated layout with a sidebar navigation, a top navigation, a fluid-container and then page-title and page-body structure for each page. So just adding another container did not solve the problem as suggested in that answer.
Once I get into the page-body, all the rows are stretching 'outside' the parent page-body.
Notice I have added padding to the default container-fluid to 'pull' all the content in from each side of the page. Removing them does not fix it.
I've tried every change I can think of except removing the padding from the default row, because I'm pretty sure that is a no-no.
Anyone have any idea how to get those pesky form controls to stay 'inside' the page body?
There is two solution either give an additional class to row and manipulate its layout or don't use row use <div class="col-md-*" /> without parent .row class div as many times u want and use <div class="clearfix"> if you want to break forcefully to next row
EDIT:-
For example
<div class="row">
<div class="col-md-4">div1</div>
<div class="col-md-4">div2</div>
<div class="col-md-4">div3</div>
</div>
<div class="row">
<div class="col-md-4">div4</div>
<div class="col-md-4">div5</div>
<div class="col-md-4">div6</div>
</div>
The same can be achieved without .row class
<div class="col-md-4">div1</div>
<div class="col-md-4">div2</div>
<div class="col-md-4">div3</div>
<div class="clearfix">div4</div>
<div class="col-md-4">div5</div>
<div class="col-md-4">div6</div>
<div class="col-md-4">div1</div>
Is it possible to nest elements with aria-hidden="true" and aria-hidden="false"?
For example:
<div aria-hidden="true">
some hidden content
<div aria-hidden="false">
some visible content
</div>
</div>
This seems not to work for me. I tested it with NVDA and its functionality to display a full list of links on the page. If I set aria hidden true on the body I could not manage to get any links even when I started to set aria hidden to false on some child elements. Currently it looks like I cannot overwrite the aria hidden state in a child element.
I know this might be a quite unusual approach but the problem itself is unusual as well. A huge light box which contains a whole site itself(no simple modal dialog to be short).
No, that is not possible.
You hide the element and its children.
As an example, when creating a modal window you hide everything but the modal, like this:
<div aria-hidden="true" id="page-wrap">
<main role="main">
<p>content</p>
</main>
</div>
<div aria-hidden="false" id="myModal" aria-labelledby="myModal-title">
<h1 id="myModal-title">Sign up!</h1>
...
</div>
This will then hide the #page-wrap and show the #myModal to assistive technologies
I think my last question was misunderstood. I have pasted below, the HTML of the page I am having troubles with, but you can see it here: http://jsfiddle.net/wCZYU/6/
Basically I would like a fixed header (pageHeader) and a colored div that fills the browser window, NOT the entire page background. I then would like a div under this that the user will be required to scroll to see
<header class="pageHeader">
<div class="setWidth">
<div class="navMain">
Home
Work
Blog
Contact
</div>
</div>
</header>
<div class="secFill">i want to be below the navigation</div>
<div class="content">i want to be below secFill</div>
This is the image that I posted earlier that I want it to look like
http://i.stack.imgur.com/jZgMb.png
The navigation must be fixed and compatible in ie7/8.
Thanks alot (again)
If I'm understanding correctly, you just need to define .secFill as height:100%.
.secFill {
height:100%;
background-color:red;
}
http://jsfiddle.net/wCZYU/7/
I have a page of things that looks like this (and yes, I have included the scriptaculous javascripts, because the toggle actually does work):
<html>
<div id="container">
<div id="thing1" class="thing" >
<p>Some visible stuff 1</p>More1
<div id="extra1" style="display:none;">
<p>Some extra and initially invisible stuff</p>
</div>
</div>
<div id="thing2" class="thing">
<p>Some visible stuff 2</p>More2
<div id="extra2" style="display:none;">
<p>Some extra and initially invisible stuff</p>
</div>
</div>
<!-- 96 more entities of class="thing" -->
<div id="thing99" class="thing">
<p>Some visible stuff 99</p>More99
<div id="extra99" style="display:none;">
<p>Some extra and initially invisible stuff</p>
</div>
</div>
</div>
</html>
When I click on the "More99" link at id="thing99" which is way down at the bottom of the page, , the div at id="extra99" appears as it should, but the page then the page automatically scrolls back to the top.
When I clck the "More1" link at the top, it stays focused at the top.
Is there anyway I can keep the page from scrolling back to the top and/or to refocus it back to where I just clicked? I don't want to scroll back down and find out which one I just made visible.
Try return false; after your Effect.toggle(); calls.
More99
This isn't the ideal way of handling this, but it should fix your immediate problem. Ideally, you would remove all of your Javascript from your HTML, and do away with all onclick attributes, handling everything from a remote block of Javascript.
Jonathan & Tatu started me on the right track. I tried "return false", and it worked some of the time.
With the "return false" concept in hand, I searched GOogle and stumbled on this page for hrefs and return false.
That "#" tag kept returning me to the top of the page. I tried href="" without the "return false", and it worked as desired, but it randomly reloaded the page as well.
The following solution gave me what I wanted consistently:
More99
Everything worked as desired, and no random page reloads.