Highlighting active panel in CSS without JavaScript - javascript

I'm building something similar to this - http://www.impressivewebs.com/demo-files/content-switcher/content-switcher.html
I wondered if anyone had any ideas as to how I can show the current panel in the navigation WITHOUT using JavaScript - pure CSS.
I'm fairly confidant it's not possible but I thought I'd ask anyway.
Just to clarify...
You'll notice that when you click a link on this page - http://www.impressivewebs.com/demo-files/content-switcher/content-switcher-javascript.html the link you just clicked on highlights to inform the user which panel they're looking at. That's what I want to do in CSS.

It's possible, believe it or not, it's just really tricky. This should get you started: http://thinkvitamin.com/design/css/how-to-create-a-valid-non-javascript-lightbox/ The key bit is captured in this quote:
I'm sure you are all aware of linking to an an element on the same page with the use of the ID attribute and how it works. However, you may not have known that linking to an element that is hidden off the page causes the element to be "pulled" into view as opposed to the window jumping down to that element.
So basically, you'd put all of your slides off-page and then have the numbered links use anchors to pull those into view. Your use case should be a bit simpler than the one she's doing, since you don't have to dim out the rest of the page.

What you need to do is to put what you need to slide inside a container with fixed size and "overflow" property set to hidden.
Then, inside this container, you put your "slidable" contents inside a list of anchor elements with "display" set to block and size the same of the container.
If, from a link on the page, you call one of the anchors in the list, the element with the correspondent anchor name will automgically show up..
simple as that.

Related

Reference to part of the site using existing JavaScript animation

I am trying to design a website. I decided to work with this template from templatemo.
I am currently trying to add a reference to a specific part of the website (e.g. Contact) in the "normal text area". I tried to just add a href in the text, like this:
Contact me via the <a href="#contact_form" >Contact Form</a>
This does not work properly. If I click on the reference, the whole layout is somehow messed up. I assume this is because the click on the link does not trigger the javascript function for the "changing the slide" properly.
My question is now:
How can I trigger the javascript functions, for "changing the slide" to a specific part of the page in regular text areas?
This animation is already implemented and works properly (e.g. it is triggered when clicking on the buttons in the navigation bar). However, I have no clue how to use the same animation for jumping to a part of the page outside of the navigation bar.
I hope you understand my problem.
Thank you in advance for your support!
Ideally, you would have to modify the page contents in the respective location in the HTML file. The way this file is constructed is that you have a ul list with li elements that indicate each page, and each li element is given a numerical value that represents its position in the list (e.g. 1, 2, 3, ...). Make sure to edit and add any new pages in this part of the markup. If you want to adjust or trigger any page transitions, edit the data-no value in the <a> tag in #tmNavbar to the position of the page in the list.
If you want to trigger the transition from elsewhere in the website, I would recommend just clicking on the respective nav-item using Javascript. For example,
$('.nav-item').get(i).click() /* i is the data-no value` */

Is there a way to determine if CSS class is active in HTML page?

this is more a curiosity of mine, I don't know if it's something possible.
If I am inside a HTML page, is there a way to quickly determine if a CSS class is active inside that page?
I explain better, let's say I am inside a website with a list of different users and near their avatar I may have a green badge for online users, while others has grey badge.
If this list is really long, is there a way to programmatically (or at least quicker than scrolling and looking by myself) detect which users are online?
I thought they have a different active CSS class but I don't know how to look for it.
Thanks
NOTE: I know how to detect an element, but if there's a list of elements I need to know which of them has a particular class active
you can use (inspect) in chrome ctrl+shift+i in inspect element you can see which css is active or not right side
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
Placing the code below within your developer console should display the length of the existing classNames if they exist.
const classes = document.querySelectorAll(".className");
console.log(className.length);
You should then be able to navigate the classes for the relevant information by navigating the object trees returned for each object found by the querySelectorAll method.
But there may be times where this may not be the true count to the data set.
For example, if the data is dynamically loaded during page scrolling. You can then add an iterator loop to detect when you have reached the bottom of the page and push to the classes array.

Need an anchor link that only moves Overflow text box without Scrolling Browser

I'm trying to figure out a way of clicking an Anchor link TEMPLATES
on the top of my page without having the browser scroll to the point of my anchor.
Sounds redundant huh?
Wait.
My anchor link is inside of a overflow: Hidden text box where clicking the Anchor link
at the top of my page should only raise the anchor in the Overflow text box displaying it's
content, like having a new webpage. From a layout perspective the browser must always be at the top of the page where my form is.
Anyone have a clue?
Thanks
UPDATE:::
Oh spoke to soon, looks like the Css and Javascript - Show and Hide method would be more adequate.
Found here: http://webdesign.about.com/od/dhtml/a/aa101507.htm
Thank internet!
It is very easy do so. What you are trying to do is to have a parent div/view which would act as the main div and all the other divs/views will be loaded or unloaded within it dynamically or so as its children. It would better to employ a design pattern such as "MVC", but it can be done via JQuery straight up. If I was to tackle something like this, I would have a "navigation view" and then content views so when a user clicks on the desired navigation link, that particular view will be loaded or scrolled in. (Of course, you need to experiment and line your depths as desired for the content views).
This is how Flash is programmed. This is a very high level explanation, and I hope it gives you somewhat of an idea about getting it going.

How do I stop the browser from scrolling to the top when an "#section" link is clicked

I have the following link:
Section
Now I really want this link to be working so the url will be changed to
mypage.html#section
But than on the other hand, if I just keep the code as it is, the browser would scroll the page back to the top automatically, and I don't want that to happen.
Obviously return false; will not suffice because it will not change the url.
Any ideas?
(Thanks)
You are attempting to click an anchor that ties to a hash. Which is going to attempt to jump to the the appropriate element with that name. If it does not find that name it will just end up at the top. This is normal behavior.
It seems like you want to change that, from which I recommend not using and anchor and adding the #section hash via JavaScript:
Section
That should give you your desired result.

iframe-like within specific id or class using javascript?

On iframe, it show full page.
But I want an iframe-like which showing only within specific id or class.
(So, it must be not the usual iframe. I think javascript is the closest solution to this.)
If I understand it correctly, this doesn't have much to do with the Iframe itself, but more with your selectively setting some parts of your page to visible or invisible, depending on how the page is called?
You could make your page modal, for example by adding a querystring parameter ?viewmode=full or ?viewmode=reduced and then your page would only show certain areas depending on the value of this parameter. In your Iframe you'd set it to viewmode reduced to only see those areas you want to see.
As to how to show only specific areas, you can either do this server-side (hide those Panels that you don't want to see) or client-side with jQuery (show only those divs that have class X). It depends on the structure of your specific page which solution is going to be easier for you.

Categories