I am working on a webpage with navigation at the top. I was wondering how to make an area of an html page clickable. That way one could click not just on the text in the navigation bar but a general area around the text in order to navigate from page to page. When I keep trying to do it, it generally messes up the divs I already have on the page.
Any help would be appreciated!
Thanks!
If I understood your problem propertly:
Try setup display: block; for your menu text links, + add them padding. Also possible to use width and height
So active link will be not only the text, but also the area around it.
There are only a small set of HTML elements that you can place inside an <a>, and I am guessing none of them is doing the job for you. For example, a div cannot be placed inside an <a>.
In that case, you can use javascript or jQuery to listen for a click on a certain defined area, say a div, on the page and respond to it by changing the address (say by changing window.location.href). This will have the same effect that you are looking for.
Please note though that usability and design ethics demand that a user of your website knows that a certain area is a link and will take you somewhere else before they click it.
I'm assuming by area you mean an entire div? We can use javascript (jQuery) to do this:
$("#mydiv").click(function() {
window.location = 'http://www.google.com'; // redirect here on click
});
<div id="mydiv">
<!-- this area we can click -->
</div>
Related
I'm having an issue where when I scroll through my homepage with the anchor tag sections it does not line up properly. For instance, if I click "showcase" it will go to the section but not highlight the navigation hover like it should. However, if I scroll slightly down it will then hover.
I read online in the past this was resolved by adding padding into the css for the section tag. I couldn't seem to get it to work.
Any help is appreciated, thank you.
BQ: How do I change the active section the page opens to? I tried changing the "active" tag, but it still uses the same section.
I'm using this template: http://www.blacktie.co/demo/pratt/#home
you have two identical ID's on your page , eg #showcase. Other then that you probably need to set an offset in the jquery scrollto function.
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
I am using a wordpress plugin for sliding images and text. This banner has a content area (as all do) where the images which slides are displayed. text and images can be added from back end. Text is allowed to display over the image. I mean the text will show over the image.
What I am trying to do is forcing that text outside that content area so as to show it outside of it.
<div class='uds-bb-slides'>
<!--slide 1-->
<div class='uds-bb-slide'><a href="" class='uds-bb-link'>image source 1</a>
<div class='uds-bb-description uds-undefined' style='top:185px;left:0px;width:270px;height:34px;'>
<div class='uds-bb-description-inside'>this is slide one text</div>
</div>
</div>
<!--slide 2-->
<div class='uds-bb-slide'><a href="" class='uds-bb-link'>image source 2</a>
<div class='uds-bb-description uds-undefined' style='top:185px;left:0px;width:270px;height:34px;'>
<div class='uds-bb-description-inside'>this is slide two text</div>
</div>
</div>
</div>
Above is the plugin output. from the javascript at page load , uds-bb-slides is made overflow:hidden so that the sliding images show within the content do not show outside it.
This is the problem due to which the forced text is not showing. but when in the plugin js file , I make it overflow : visible. text show outside but the banner images does not show only in the content box. Theay comes from the very right and goes to left. I mean it is not showing its animation properly
My question is how I can force the text outside while the image slides show properly.
Plugin Javascript snippet for making uds-bb-slides overflow hidden at page load
b(".uds-bb-slides",h).css({overflow:"hidden"});
Thanks
I'm not sure of what degree of control you have over the markup that is generated, but if it is possible, I would recommend somehow getting the div with class uds-bb-description uds-undefined to be a sibling of .uds-bb-slides, which has the overflow: hidden. You can then try to position it from there.
You could do this by putting both under a wrapper div with position: relative, and set both child div elements to position: absolute so that you can position them relative to the container.
If it is too difficult to change the output markup from the plugin, you could try doing it with JavaScript. jQuery would make this job easier, but would not be absolutely necessary.
The basic idea is to move the text in the DOM so that it is not longer a child of .uds-bb-slides and is therefore not effected by the overflow: hidden.
Edit:
Ahh...I just noticed you have the .uds-bb-slides and .uds-bb-slide classes, and I mistook the second for the first one.
In that case you may need to do some "hacking" to get the result you want. The plugin probably has some JavaScript that handles visibility and movement of the whole .uds-bb-slide elements, which means the text will go with it.
Option 1:
I don't know exactly how you want it to look, but it sounds to me like you want the text to be on the side, but slide in as well just like the images. One thing you could do is have two .uds-bb-slides elements. The first will be the regular one with the images, but now without any text. The second will have only the text without the background image. You can then attach the event that triggers the image to slide, to the event that causes the text to slide.
Say there is a button (I don't know if there actually is one) that you click to slide the image. You can do something like this with jQuery:
// This is jQuery
$('.btnSlideImage').click(function() { // when you slide the image...
$('.btnSlideText').click(); // trigger text slide
});
You might even be able to copy whatever code they use, and just apply it to your second slider for the same event as the first.
The problem with this is that you get that second slider, which may block clicks or have a default background. You may be able to just set the height and width to 0px, and set overflow: visible, so that the text appears. Again, it's difficult to give exact details without knowing what is really going on.
Option 2:
You could write your own text slider and position it in the right spot. It doesn't even have to slide - perhaps a fade will work for you, which may be much easier to do with jQuery, CSS3, or even pure JavaScript.
Then you can attach an event handler to whatever is causing the image to slide like in option 1:
// This is jQuery too
$('#whatever_makes_image_slide').click(function() {
SlideMyText();
});
I have a fixed menu bar at the top of my site. I have a page that has inline linking by adding a hash tag to the URL making it jump to that particular element. The problem is the element it jumps to is hidden being this fixed menu bar. Is there a way to move the jump down a bit? Here is an example:
Example
Sadly you cannot do that via html, you'd need some JS, or even CSS, depending on your code.
Can you post a sample on jsfiddle.net ?
As a workaround, add another (hidden) element below it and simply link to that one instead:
click me
<!-- further down the page is the content -->
<div id="#element1">Here is what users will be reading!</div>
<div id="#element1-target"
style="visibility:hidden;{make this lower down below the actual text}"></div>
My only question though, is if your header bar is blocking your text that the page 'jumps' to, wouldn't you want the page to link to higher than the target?
Given your question is vague and I don't think your example shows what your problem is, this should do what (i think) you're trying to do.
:)
Looking for a way in CSS (in the child theme) to make a pop out from one div display over another, without blocking the links in the lower div when the pop-out is closed.
I am trying to use the Facebook Like Button with the comment pop-out on the pages of my site and have made the .widget-pad area of my section appropriately sized to display it when it pops up, so that it goes over another section and div that is containing a large image that links to another page.
However, when the Like button is unclicked and the pop-up is not displayed the linked area (silver part in this pick) is not-clickable.
The area below where the transparant div from the Like Button is still clickable.
How to make it so I can still click the links below where a popout happens on my page?
Ok I found the answer -- I needed to use CSS to select the .widget element and not the .widget-pad element I had been using before.
Note to all trying to deal with implementing Facebook Like in WordPress widget, something like this can help if you are having trouble getting the Comments pop-out to display over other <div>'s:
.widget{overflow: visible}
I have a div section, which is full of tags, on a event on the page I shrink the div section BUT if the user tabs into the div section, it moves so that the highlighted <a href> has focus, is there any way to lock a div section that it's contents don't move ?
So for example the code (psuedo not real) I have the following
<div>
<h4>Heading</hv>
Link 1
Link 2
Link 3
</div>
I shrink the div section so that only the h4 is displayed {overflow:hidden}, however the user can then tab to the elements and this scroll so that they are displayed in the the div "window" which is not what I want, so in effect I get <div>Link 1<div> where what I want to remain is <div><h4>heading</h4></div> in effect I want to stop the contents of the div sectio scrolling so that the selected element is displayed. I know that if they press return the selected link will be follow, but I'm not worried about this, just what is displayed
I hope thats cleared, you can see my problem if you go to link text click on the training section on the left and then back tab (shift tab) , the article section above changes.
Thanks
is there any way to lock a div section that it's contents don't move?
Not really*, but you don't really want that anyway. Even if you locked it in place, the invisible links would still accept focus, resulting in a confusing tab behaviour.
(*: short of something horrendous like changing the scrollTop of the overflowing element from JavaScript onfocus. Ugh.)
What you should probably do is put a div around the links, and set its display style to ‘none’ when the links are elided. That way they won't participate in the tabbing order.
From what I can make of your question, you want your div to stay fixed relative to the browser window. If this is the case, it can simply be done by declaring position:absolute for the div.
If you want something else, please clarify your question.