I am looking for a solution to create a CSS effect or Javascript code that will hide a menu inside a div when the browser window or parent div is resized. I want to display another div with the same menu in horizontal orientation when the first one is hidden.
<div id="show-on-100px-resize">[menu item1 item2 item 3 item4]</div>
<div id="show-on-over-100px">>
menu
item1
item2
item3
</div>
Hopefully, this explanation is clear enough. Thank you for your responses!
As mentioned by newtron, the best way to achieve this is through the use of media queries. With media queries, you can adjust the display of content based on the size of the window. Take a look at this functional demonstration http://jsfiddle.net/pomeh/Gdve3/
The sample HTML code is as follows:
<ul>
<li>menu A</li>
<li>menu B</li>
<li>menu C</li>
<li>menu D</li>
</ul>
<div>
Window width is lower than 500px!
</div>
Here is the corresponding CSS code:
li {
border: solid black 1px;
width: 100px;
display: inline-block;
}
div {
display: none;
}
@media (max-width: 500px) {
li {
display: block;
}
div {
display: block;
}
}
It's worth noting that media queries may not be fully supported in Internet Explorer. In such cases, you can utilize the Respond.js JavaScript library https://github.com/scottjehl/Respond
Utilizing Media Queries allows you to create distinct CSS styles based on the size of the browser window.
To achieve this effect, you can utilize the resize function:
$(window).resize(function(){
if (window.innerWidth < 100){
$("#content_below_100px_visible_hide_above").hide();
$("#content_above_100px_visible_show_below").show();
} else {
$("#content_below_100px_visible_show_above").show();
$("#content_above_100px_visible_hide_below").hide();
}
});
- This website appears to be quite simple at first glance. However, I have encountered an issue where every time I scroll down and then click on the "About" menu option, it abruptly takes me back to the top of the page before displaying the section with a ...
Currently, I have a Bootstrap 3 input field with some prepended content along with a checkbox. My goal is to have the input field disabled until the checkbox is checked, and when it is checked, I not only want to enable the field but also set the focus on ...
My [element] is positioned absolutely with a left property set to -9999px in the CSS. The top property has not been set intentionally to keep the element in the DOM but out of the document flow. Upon calling [element].css('top') in jQuery, Firef ...
My goal is to create a horizontal navigation bar that features menu options with headings and icons below them. Upon hovering over each option, the block's background color should change and slightly increase in size. I initially used percentages for ...
In this particular div, I have two spans enclosed. I've created a loader which features a circle filling up with red color repeatedly. While everything appears to be functioning smoothly in Google Chrome, there's a noticeable glitch when it comes ...
My goal is to center the icon horizontally within the "Data" column: Currently, I have applied textAlign: center to the column: Additionally, I am using CSS in the icon renderer function to horizontally center it: Despite these efforts, the icon remains ...
I am currently using ng-repeat to display a list of staff members: <div ng-repeat="user in staff | profAndDr"> There is also a custom filter called 'profAndDr' that only shows people with the titles "Dr." and "Prof.": app.filter('pr ...
I am struggling with chartist.js. I want to increase the spacing between y-axis gridlines by 40px. (Currently set at 36px) I have tried looking for examples, but haven't found any. .ct-grids line { stroke: #fff; opacity: .05; stroke-dasharray: ...
I attempted to utilize an onClick event within the <a> element but it is not functioning as expected. I am aiming to capture the value 777 into a variable so that I can access it later in the code. My intention was to click on the image and have an ...
Is there a way to pass HTML text input values into a Stripe form? Here is an example of what I currently have: <input type="text" name="trip" id="trip" value=""> JS: (part of the form) .append(jQuery('<input>', { 'nam ...
I am currently working on a project that involves a .json file stored in my local folder. Along with the file, I have Javascript code in the same directory to access and read the values from the .json file. To open the file, this is the line of code I use: ...
In TypeScript, the number variable is floating point by default. However, there are situations where it's necessary to restrict the variable to a specific size or type similar to other programming languages. For instance, types like int8, int16, int32 ...
As I dive into refactoring my code to TypeScript, especially as I am still getting accustomed to it, I find myself pondering about the HTML element types with React events. This has led me to rethink how I approach form creation and submission event handli ...
When a link is clicked, a pop up is displayed. Here is the code for the pop up: <div class='' id="custom-popover"> <div class="arrow"></div> <h3 class="popover-title">Popover left</h3> <div class="pop ...
I am currently working on implementing AddeventListener to listen for 'Exit' and 'LoadStart' events in InAppBrowser within IONIC2. Here is my HTML: <button (click)="browsersystem('https://www.google.com')" > Visit URL& ...
I am trying to showcase HTML content on the React front end. Here is the input I have: <p>Hello/<p> Aadafsf <h1>H1 in hello</h1> This content was written using CKEditor from the Admin side. This is how it appears on the React fro ...
I've been struggling to change the font color and background color of the <a> element, but nothing seems to work. I've attempted using hexadecimal notation and styling the .btn class without pseudo-classes, with no luck. Check out my CodeP ...
I've encountered an issue with jQuery Thickbox while using it to display an iframe (upload.aspx) for file uploads. The code behind for upload.aspx ends with the line: Response.Redirect("blah.aspx"); The redirect destination is dynamic and based on t ...
I've been on the hunt for a solution to display the collective values entered into multiple text box fields as they are being typed. Currently, I have 6 text boxes (description1, description2, description3, description4, description5, description6) wh ...
I am struggling with a div <div id="box-loading-txt">txt</div> Despite my efforts, this jQuery code doesn't seem to be working properly. The content in the div always ends up showing as "text B text B text B" even on the initial html() ...