Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have a Wordpress page with a biult-in search function. The results show up in the sidebar, and when a link is clicked, the content of the link shows up in my main content part.
The problem is when you use the site on small screens, 800px and down. When such a screen is used, the sidebar simply shows up under the content (The search results will still be on the top of the page unless a link is clicked, since there is no content then). However, when a link is clicked, I would like to hide the sidebar, since the search results are no longer needed, a "back" button is provided on small screens instead.
My question is, is there a way to hide the sidebar only when the user is on a specific page, in this case the page that shows up when a search result is clicked? I have looked up most of the CSS pseudo-selectors without getting anywhere.
If this is not achievable via CSS, Javascript would also be fine.
The page can be found here: http://stilius.se/wilink/
And a version with a performed search here:
http://stilius.se/wilink/store/products/category/stockholm_nacka_tullen_ica/?cat=41
The <body> has different classes on different pages and in different conditions. You can hide or show something using simple CSS cascade:
.search #sidebarborder { display: none; }
You can check all available classes here - http://codex.wordpress.org/Function_Reference/body_class
.linkClass:active #sideBarId { display: none; }
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
So I was working on a web development project using HTML and Tailwind css, Everything is looking fine on desktop mode but as soon as go to mobile mode the index page shows some extra space on the right side of the page. Tried using overflow-x :hidden but it doesn't fix anything. I have attached the Image and Live demo of the project below.
Heroku Live demo
Hi,
this problem faced me and i have solution.
This problem because you make the menu to go right and this cause scrolling horizontally and overflow doesn't work
Mobile Ignore overflow on body tag
Try to make div and hold your page content and give him
overflow-x: hidden.
It will work
The problem is related to the markers added by some lib, maybe the one taking care of the animations.
If you remove them before changing to mobile view, the space on the right side disappears.
I had same problem and for me was hepful overflow-x: hidden
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
There is no custom css set for smaller resolutions. I am having a problem where if I load the webpage at a low enough resolution, click the contact box, I cannot enter any fields till I stretch the browser to a larger resolution. At this point I can edit the contact box and also go back to the mobile resolution and have it still be operable.
The only way to truly explain this would be for you guys to go to the temporary site I setup here. I have scanned the HTML code to see if I am missing a closed div or something, but this scenario is very odd to me, especially since it works at a full resolution.
Please let me know what I am missing, I have exercised all of the possibilities.
It seems to be a problem with the z-index of either the pop-up or the background/overlay that comes up with it. I pulled up the dev tools and set a high z-index on the pop-up and a low index on the overlay and that fixed it. However, the elements are reset each time you open the pop-up. That makes me think that the elements are generated each time rather than shown/hidden. Whatever the situation is, you'll need to add an appropriate z-index to either the css or the element's themselves (inline - not recommended) and possibly with an !important depending on what all is going on in the code.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
i am working on a custom project where I need to slide in/out div on click of menus.
Please check the link where I am working http://ahmedabadwebs.com/birds/index.php click on menus (about, concept, contact).
You may view the source code of page for js and code.
The problem is when I click first time on any of the about, concept or contact menu the div/box moves in from right side, this is fine. but after that when i click on other menus they don't come in alike.
What I want to do is when we click on about the about div should come and stop in middle of page, then we click on other menu say concept, then the about div should move out slowing to left side and concept div should move in from the left side.
Any help or suggestions would be appreciated.
You need to reset the pagei variable, and also clear the interval once it is complete.
See clearInterval
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I would like to create a header that contains graphics/images and when the user scrolls down to view the page content, the header starts off at the base and then becomes fixed at the top of the screen.
Here is an example: http://www.thinkful.com/learn/javascript-best-practices-1/
How would I create this?
I have used jQuery Waypoints (http://imakewebthings.com/jquery-waypoints/) with a lot of success.
By checking scrollTop(). You could easily have searched for this. How to build simple sticky navigation with jQuery?
Using jQuery:
With $(window).on('scroll',function(){ /*your code*/ }); you can
bind a function to the scroll event.
Inside that function use document.scrollTop to know the current
vertical position of the scroll bar
Change the css of the header and the side menu with .css() or .addClass()
Finally with the HTML5 History API you can change the URL
without loading the page using the history.replaceState() method.
I've just forked a plugin called Scrollit.js that does the job. The original version from Chris Polis works great but doesn't change the URL. My version does change the URL has't been completely tested.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I'm struggling in finding a non JS solution for my problem. Is there a way of activate a CSS transition on click and not on :hover or others?
One possibility: You can add a class that holds the transition on click. This is an example using jQuery - you can also achieve this programmatically using "raw" JavaScript only:
HTML container that should be animated
<div id="transtion"></div>
JavaScript
// bind click event to the element itself - but it can also be any other element that triggers this …
$('#transition').click(function() {
// add the classname thats defined with the transition in your CSS
$(this).addClass('translate_left');
});
There is pseudoclass for click too. But it has somewhat strange name, and normally it is only know as related to HTML link styling.
DIV.button:active {
border-style: inset;
}
Here is some nice example.