I am using this link to have a side bar that I can hide or display. How can I add a bar to the right side of the div, that I can click to trigger the hide/show?
So far I found I can do a border-right: 5px solid black in css to make a basic one.. But I actually have no clue how to make it clickable.. I'm sure there might be a name for what I want to add, but I have no clue what it is.
Any help would be appreciated.
EDIT:
Got it working with that jsfiddle. But then I messed with it to try and move it to the main content div so on hover it can expand out to the right, and also not hide after hiding side panel(which could be fixed with the css for the panel toggle) Here is my modified jsfiddle, but I can't seem to click it for some reason.
edited the fiddle to something closer to what I think you needed:
http://jsfiddle.net/y7L2qvy6/18/
**My apologies.
You're trying to add something like this then, right?
http://jsfiddle.net/y7L2qvy6/3/
**
The opening and closing of the navigation div is achieved with:
<!--put whatever text or image you like here-->
and requires that you are including jquery, bootstrap, and the following script:
<script src="js/jquery.js"></script>
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
Keep in mind that you must instruct the browser to load jquery before trying to run the script, like in the example above.
Finally, also make sure that all page content is inside of a div with an id of "page-content-wrapper", and that div must be inside of a div named "wrapper".
like so:
<body>
<div id="wrapper">
<div id="sidebar-wrapper">
<!-- Navigation Content Here -->
</div>
<div id="page-content-wrapper">
<!-- Page Content Here -->
</div>
</div>
<script src="js/jquery.js"></script>
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>
Related
I am adding a shout-box to my page using JavaScript <script></script> tags, and I really cannot figure out how to add style to it. The shout-box also goes behind the everything. Here is my website: link
The following is the shout-box I want to add it:
<script type="text/javascript" src="http://www4.yourshoutbox.com/shoutbox/start.php?key=521659178"></script>
I suggest to put your <script></script> inside the div and then apply the style for it. The z-index will help you to bring the content in front of others.
<div id="myshoutbox">
<script></script>
</div>
And the CSS:
#myshoutbox {
z-index:9999;
}
You can apply other styles you require.
What I want to do is basically this
But for this solution to work, I need to specify the height of the div, but the div needs to fill all the remaining height, so I found this
the issue is: each answer works separately, but both together seems to not work.
Here's what I have:
<body>
<div id="master-page">
<div id="some-unknown-size-content"></div>
<div id="separator"></div>
<div id="sub-master-page">
<div id="more-unknown-size-content"></div>
<div id="another-separator">
<div id="scrollable-content-taking-remaining-space">
<!-- content -->
</div>
</div>
</div>
</body>
The master-page have an asp:placeholder which is replaced by div sub-master-page
The sub-master-page have another asp:placeholder which is replaced by div scrollable-content
I don't know if i understood your question correctly or not.
You can use following jquery code to calculate and assign remaining space
var remaining_space = $('#master-page').height() - $('#some-unknown-size-content').height()-$('#more-unknown-size-content').height()-$('#separator').height();
$('#scrollable-content-taking-remaining-space').css('height',remaining_space+'px');
you can go to following link to see it in action:
https://jsfiddle.net/fq7bgo4w/
i am getting problem to modify the menu present in the wordpress. i am trying to make it responsive but i am unable to do it so please help me out.
Just visit this link to see the images and css flow of my page.
https://drive.google.com/open?id=0B--TMsJz_cYVYnRnRFpBOVdXYzA&authuser=0
just look into picture and look to div style which is used so please explain me how to make dropdown menu using css only to display the link......
If you want a menu special for responsive design you could use a jquery plugin like mean menu from meanThemes.
https://github.com/meanthemes/meanMenu
Just add the css file to your theme (in header)
<link rel="stylesheet" href="meanmenu.css" media="all" />
add the jquery in the footer
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="jquery.meanmenu.js"></script>
and initialize the menu to the container with (also in the footer)
jQuery(document).ready(function () {
jQuery('header nav').meanmenu();
});
in your document.ready
This should be really easy for you guys but I'm a real beginner on this & need it explained simply to me. I reckon it'll also help a lot of others like me out there who are just starting out on jquery...
I'm building a site that needs to have a button on one of its pages which when clicked not only hides a div of content (for which there are loads of solutions out there) but at the same time shows a previously hidden div of content.
I need to know the jquery which'll do this & what I need to wrap around the button to set off the jquery.
Can you help me out?
Thanks,
Stu.
If you are only concerned with two div elements, jQuery.toggle() supports two event handler functions:
$('button').toggle(function(){
$('div1').hide();
$('div2').show();
},function(){
$('div1').show();
$('div2').hide();
});
This should work just make sure that one div has a css property display:none and the other div does not (is visible.)
Inside ajax call on success you have to wirte which div you have to hide and which div you have to show.
$.ajax({
url: "Sevlet",
type: 'POST',
dataType: "json",
data:{"id":id},
contentType:"application/x-www-form-urlencoded",
success: function (data) {
$("#div1").hide();
$("#div2").show();
}
});
Firstly, jQuery is just a library of functions to do stuff.
So inbulit functions like hide() and show() can be used to do what you desire.I believe the documentation on jQuery for hide/show/hide_show on the links below are quite simple to understand and you should have little to no problem. http://api.jquery.com/hide/ http://api.jquery.com/show/
http://www.w3schools.com/jquery/jquery_hide_show.asp
However, another way to approach the problem is to use the jQuery methods to toggle CSS properties which will cause the div elements to be shown or hidden based on css properties. I will demonstrate it for the height property, but several other's could also be used including max-height, left, right, top, bottom etc.
Altering the properties in CSS, I can see how the Div is visible or hidden
Example:
<html>
<head>
<style>
.Div_I_Want_To_Show{
background: #ffe400;
width:100%;
height:0px;
overflow:auto;
}
</style>
</head>
<body>
<div class="Div_I_Want_To_Show">
<p>Some Random Text Here</p>
</div>
<button class="btn">Click to See Content</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(".btn").click(function(){
$('.Div_I_Want_To_Show').css('height','20em')
});
</script>
</body>
</html>
The fiddle link : https://jsfiddle.net/L7pmarzh/
And in case you wanted to know, you can animate it as well, which I guess you would want to any website, since a simple hide and show effect is not appealing to any user.
Hope this solves your problem :)
I want a login page that will slide down from the top of the web page. BUT I want it to move the whole website down rather than covering the page.
Anyone can refer me to a link?
Erik
One way to do it is to use relative positioning in your HTML so that the main content flows after the login. This means all you have to do is resize the height of the login div to push down the rest of the content:
<div id="thePage">
<div id="login"><!-- login stuff here --></div>
<div id="restOfThePage"><!-- The rest of the page here --></div>
</div>
CSS would be something like this:
#login { height: 0; }
Then when you wanted to show the login panel through JavaScript, you'd just do this:
document.getElementById("login").style.height = "100px"; // for example
Or if you wanted to animate the login panel, you could use jQuery or any number of JavaScript libraries with animation capabilities.
If you are using jQuery then .slideDown() method is what you want.