I build a toggle bar in html/css and I want to use JS to close. I think I did all the code right, yet the script does not work.
Code:
$(document).ready(function(){
$(".fa-times").click(function(){$(".sidebar_menu").addClass("hide_menu");
$(".toggle_menu").addClass("opacity_one");});
jsfiddle link
The point is that I created a button "x shaped" that closes the side bar but you won't be able to see it cuz is a custom font and I have no clue how to upload it onto jsfiddle. The button is placed in the top-right corner of the purple bar.
I hope its enough information and the code is easy to understand. I`m just at the start with html/css/js but I have to do this for a microsoft project since noone in my team can't even set a default html page.
P.S. Ignore the white element with that random text.
Correct me if i am wrong,as ii saw you fiddle your code working fine.When user click on cross btn that time blue side bar hiding left side.
Check width with element inspector in you browser
<i class="fa fa-times">you need same place holder here, or set width</i>
EDITED
Related
The Atom 'Script' package allows you to see the output of your code in a separate panel to your script. However by default it puts the panel horizontally, below the script panel.
I want the output panel to be displayed vertically, to the right of the script panel. I found out out to do this here: https://github.com/rgbkrk/atom-script/pull/1516 by "adding position: right in the constructor's super method" in the lib/script-view.js file.
However, this side panel is very thin and there is no way to expand or contract it as there was when it was horizontal.
Why has this functionality disappeared, and how do I re-instate it?
I had the same question for this because I wanted to use atom for python but since I had only been using python IDLE and editing in IDLE I have come to move the IDLE window to the left side of my screen and the program that I am working on on the right side.
I was finally able to locate the file that is responsible for creating the panel and determining its location.
To change the location of the panel you will have to navigate to the file location where the atom packages are located. For me it was within the path
C:\Users*nameOfUser*.atom\packages\script\node_modules\atom-message-panel\lib
in the folder there should be a JS file called "MessagePanelView". Open within your desired text editor. Once open you will see within "var MessagePanelView" there is
"this.position = params.position || 'bottom';"
once spotted you have the option of changing the text from 'bottom' to ['left','top','right'].
NOTE: when I had changed the positioning it worked almost as expected, the only problem was that the panel had auto adjusted and it ended up being too skinny. To fix this issue you can scroll down to "MessagePanelView.prototype.attach" and you should see "$(".panel-body", this).css" within this portion you will see that there is a value of "maxHeight" set, now all you have to do is add "width:" and the size that you would like.
I know that for the most part this solution is a temporary and clunky solution and that the panel is also not resizable is width. hopefully someone will be able to create a cleaner solution to the problem than I would be able to.
I'm making a website and want a navigation bar that stays at the top of the screen. I can do this fine but when I scroll to top it goes above header. How do I get it to stop scrolling with the user before the top of the page? I have watched countless tutorials but none seem to work. I think I need JavaScript to unstick the bar at a certain height, but unsure how. Also how do I restick it when the user scrolls back down?
Yes, you will need JavaScript to handle this. It is not too complicated, but you will basically need to add an event handler for the scroll event on the window, and inside the handler you can check the scrollTop of the window to see how much has been scrolled. When it has been scrolled "enough" (usually the height of your header) you can then switch the position of the header to fixed.
You can see a demo about it on the excellent CSS Tricks, and there are many tutorials and plugins that can help with this.
Yes, as danwellman said, you need js.
I have a small code I used in my webpage.
// Highlight the top nav as scrolling occurs
$('body').scrollspy({
target: '.navbar-fixed-top',
offset: 51
});
You need a file like "scrolling-nav.js" or anything you prefer. And in your html, don't forget to call it.
// In the end or in the beggining you call your js file
<script src="...(filepath)/scrolling-nav.js"></script>
There are many more cool possible snippets you can find. This is really to keep the navbar fixed after the offset of '51'. You can also add the smoothed movement to the webpage section after selecting a menu button.. If you have a onepage website, for example. This would also be js.
Good luck. :)
Does anyone here know any tutorial/guide lines/link that will help me create an scrollbar like the one at http://www.wdyl.com/#apple [on the left top]
Yes, jQuery.fracs, which I read about just the other day on daily.js.
It does not have the magnifying effect like the link in the question, however it does generate a dimensionally correct tiny version of the page it is on, which I think is really smart.
I'm using AddThis (http://www.addthis.com/) on one of my sites, and it's working just fine. But I've noticed that the dropdown box will always open to the right side, if there's room enough to the right in the browser window. If there's not enough space to the right, the dropdown will open to the left side.
But I'd very much like the dropdown box to open to the left side all the time. Also if there's enough space to the right.
But I simply can't get this to work.
My AddThis widget works just like on this site: http://home.dk/
You can see the small button ("Del siden") in the right side next to the print and e-mail buttons.
As you can see the box opens to the right if the browser windows is wide enough. But try to make the browser window smaller so there's not enough room for the drop down. Then it will open to the left.
How can I force the dropdown box to open to the left all the time?
Thanks you very much in advance folks...
Best regards,
Kim
Read: http://www.addthis.com/help/client-api#configuration-ui
Try to use ui_offset_left and set a negative offset to the left so it positions it. You also have ui_hover_direction but not sure if that will accept a left value.
i am working on a site that scrolls horizontally. before i put the jquery scroll.to plugin in, i have some work that needs to be ironed out with the anchors.
you can see in the example, when you click to go to box 2, it doesn't go to the right location. then when you click back to box 1 or home, it's placed the content flush to the left side.
this is very similar to a previous question, but it's not answered.
You can see this. This is working great. You can see the source code and try. It is using jquery plugin to smooth scroll.
SEE THIS