my question is simple. What i want to do is click on a hyperlink (item2 as diagram below), and my page will automatically scroll into (item2 content at the right side). Usually what we do is we set an id to the section, and put <#id> on the hyperlink it will have the scrolling feature. How about if the right hand side content is created as listviewitem?
something like this: http://html5up.net/prologue
On click of item2, set the focus to Item2 from listview.
Actually the question is not cleared.So it may help you..like Put the listview items in a panel.And add a style to panel.. overflow:scroll;
In css you can also apply this.
Related
I have some FAQs in an accordion. Question 1 is active and open with the answer visible. Question 2, when I click on that, Question 2 closes. I don't want that. Ideally, and this is sort of off-top, I'd like Question 1 not to default to being opened.
I tried:
$(document).on('click', '[data-toggle=collapse] .fa', function(e) {
e.stopPropagation();
});
But my accordion still collapses when another is clicked on.
From your question, I can kind of guess your problem. Check to see if your HTML code has a data-parent="xxxx" attribute where xxxx is the id of the container. If you find it, remove that attribute. This is the thing that makes other panels collapse.
To add accordion-like group management to a collapsible control, add
the data attribute data-parent="#selector". Refer to the demo to see
this in action.
See: https://getbootstrap.com/javascript/#via-data-attributes-3
The easy way to accomplish this would be to simply remove the div.panel-group container that wraps the accordion group. You could then also remove the "data-parent" data attribute from all the collapse targets, just for cleaning up the code.
And your second question -- to make a panel default to open, you just give it the classes "panel-collapse collapse in" <-- the 'in' makes the panel begin opened on the page.
I have a menu and depending on which page the user is currently on, I would like a border to show up under that menu item. For example if the user is on the home page, there would be a blue border underneath the home text on the navigation bar.
I am having trouble figuring out what page the user is on using jQuery.
Normally I would use CSS and on each page manually change the class in the html but since I'm dealing with Wordpress I can't change the ids unless I work with a walker but I figured I would give it a try with jQuery.
I tried setting each page as a variable such as:
var homeUrl = 'http://example.com/';
if (document.URL.is(homeUrl)) {
$('#link-one').css('border-bottom', '1px solid #000');
};
Please try use plugin Zia3 CSS JS :D
I have a bunch of HTML fields logically separated as such: half the fields reside in: div id="general" and the other half reside in: div id="advanced"
What I'm trying to implement (and failing) is the following:
The fields in the general div to be shown (by default). A button with the caption "Advanced" shown. And the fields in the advanced div to be hidden.
When this button is clicked, the following should occur:
General section collapses hiding all it's fields
Advanced section expands showing all it's fields
Button caption is changed to "General".
Subsequent clicks toggles the above.
E.g. upon the next click, the advanced section now is hidden, general section now is shown, and button caption changes to "Advanced"
Notes: This seems trivial but being new to web front-end, I can't get this easily. If my div section is incorrect, then scrap it. I suspect I'm on the right track, and just need some jQuery code to collapse and expand divs.
Below are my attempts:
I used the Bootstrap collapse plugin with accordian markup, but this isn't what I want. It comes close though, but each section has a heading/button. I'd like one heading/button to toggle each section in an opposite manner.
I used the Bootstrap collapse plugin without the accordian markup, but same result as attempt 1 - two button again.
I tried using jQuery to do this dynamically, but can't get the logic (or syntax) correct.
I'm using Bootstrap, but happy to go with jQuery (or JavaScript) solution if it can't be done solely in Bootstrap with the collapse plugin.
You can do it using jquery by toggling a class on element which decides which fields to be shown.
for e.g. Take an outer div, and put general and advanced div inside outer div and show only the fields based on outer div class like advanced using css. And bind a button to toggle the class on the outer div.
Checkout JSFiddle here : http://jsfiddle.net/eqhw2mxx/2/
Check the JSFiddle :- JSFiddle
$("#advanced").addClass('hide');
$(".button").click(function(){
$("#advanced").toggleClass('hide');
$("#general").toggleClass('hide');
if($(this).attr("value") == "Advanced"){
$(this).attr("value","General");
}
else if($(this).attr("value") == "General"){
$(this).attr("value","Advanced");
}
});
So I have a sprite of buttons that I want to use for my website (https://www.metsales.com/MetropolitanSales/microsite/epson/images/epson_buttons.png),
and I was wondering if it is possible to set a section of each button to open up a drop down menu.
This may get a bit confusing but, for each button, when you hover over the entire button I have a hover image in the sprite, but I want to distinguish between clicking the arrows on each button and the button itself. So the arrows will bring a drop down menu and the button will take you to an overview page.
How can I go about doing this? haven't been able to find anything with nearly enough information to help me out.
Simple approach would be put a child in the link, if child is clicked... open dropdown, if not follow link
Position and size the child accordingly
<a class="buttonClass" href="foo.html"><span class="toggleDropdown"></span></a>
jQUery
$('a.buttonClass').click(function(e){
if( $(e.target).is('.toggleDropdown') ){
/* prevent href being opened*/
e.preventDefault()
/* run dropdown code here */
}
})
User wouldn't see child as it would be transparent
Yes you can all you need to do is tweak the elements inside each button, in my case i use a and div ul please review this demo
http://jsfiddle.net/BFWQa/13/
and ask any question if it's what you expected.
You should use from background-image and background-position rules of CSS. for more details check this link.
Please voteup it or/and mark it as answer if it helped you.
I have a big page, with full of (server side) generated information organized into "chapters". To allow an easier overview for the user I put a little element with CSS fixed position to the top right corner of the page.
<div class="selector">Goto section within the table: <select
id="chapterselector"
onChange="goto_section('chapterselector')">%SELECTOR%</select>
</div>
The text "%SELECTOR%" is replaced by the server side component to the correct option elements.
function goto_section ( element ) {
element = document.getElementById(element);
window.location = '#Chapter_' + element.value;
}
This is the JavaScript part for now. This works nicely. However one little issue remains:
Users (including me) can use the select menu to jump inside the document, but then often cursor arrow keys would be used to navigate to scroll the page. The problem: after using the select menu, it has the focus, so cursor keys now "scrolls" the possible choices inside the select menu. What I want: after using the select menu, I want it to lose the focus automatically, so cursor keys scrolls the page.
How can I do this? Thanks for any suggestion.
element.blur()
try that after setting the location