Web page element responsive to currently shown section [duplicate] - javascript

This question already has answers here:
How to change css for active link based on the hashtag
(2 answers)
Closed 8 years ago.
I'm dividing my web page in several sections (let's say section1, section2, etc.) so I can access to them from the main menu, using the corresponding href="#section1", href="#section2", etc.
This menu is actually a "floating menu", meaning that it's always shown at the top, even when you scroll down on the page. I'd like to make the menu's buttons responsive to the section that is being shown at each moment. For example, if I'm looking at "section2", I'd like the "section2" button to be coloured in a different way, or with bold letter...
I guees this is not really difficult, but it seems to me really hard to find about it.
Any clue?
Thanks in advance!

If You are using Bootstrap library.
It in build provides the option for selection of the button.
Plain HTML if you have used then you can use Javascript or JQuery library for button to be Selected with differnt CSS.
http://api.jquery.com/button-selector/
Button API can be used to select the button and change the CSS for the same.

Related

How would one make a slide show of text?

How do I make a slide show of text?
For exemple, on my “about” page (for my brand), I have three different points, but I don’t want to have them all together so I have three different parts (still in my “about” section) and when someone presses “continue” or “next”, a new point is switched out with the first one (still in the “about” sub page).
This has been answered here: Very Simple with Link Click Change the Content of a Div on a Single Page
Basically you want to use onclick events to toggle between versions of content for a div.

Anchor Jumping across the section within page

I am trying to implement "Anchor Jumping" functionality using JavaScript and Angular 2 in my application, Means user can jump across the section within a page.
As per the client requirement, User can jump(Navigate) the section using of pressing Ctrl+Shift+Left/Right Arrow key.
Here, I add one snap to clear out the question as below.
As an example, Suppose first time focus on Menu and user press the Ctrl+Shift+Right Arrow at that time focus should be go to next element item(i.e. Breadcrumb section or any section).
I am very confuse about, How to manage the dynamic loading content? (How can I count this dynamic content in my section?)
Please suggest any idea to achieve this functionality.
What you need is a focus manager. I wouldn't bother writing one from scratch, Angular Focus Manager is one example of how to solve this problem. It also incorporates Mousetrap.js, which adds shortcut directives.
Your dynamic content can always be wrapped in something (even a div) that has its focus managed.
I hope this helps!

Multiple navigations with javascript/jquery

I work on a multilingual website (French, English, German). I have built three navigations (with buttons), one for every language. When I open the site the French navigation appears (this works). I can change the navigation with three buttons (in form of flags). This works too. When I press one of the buttons in the navigation the correct page appears. BUT: I then see always all three navigations.
Question: what must I do that after havong pressed a button in a navigation bar this navigation stays alone? I tried it with JavaScript and jQuery but couldn't find a solution.
Any help/hint appreciated very much!
Max
1/ create a class in css
.notDisplay {
display: none;
}
2/ To each button you want to hide, apply the class in javascript using jquery
$('#button1').addClass('notDisplay');
If you want to show again the button, use
$('#button1').removeClass('notDisplay');
Do you understand it or have i to explain it more?

Displaying javascript variable without clearing screen [duplicate]

This question already has answers here:
Document.write clears page
(6 answers)
Closed 8 years ago.
I am learning how to develop and I wanted to work on a simple "clicker" game using HTML5, CSS3, and JavaScript. I'm looking to practice creating something similar to Cookie Clicker. I have created three icons and they each serve a purpose. I would like to figure out how to display a modified variable on a portion of the screen without clearing the screen or having to resort to a window popup.
Here is the link to the project if anyone is interested in helping:
https://github.com/HandleThatError/Practice
The function in question is the displayPoints function in the master.js file. I currently have the following:
function displayPoints() {
confirm(numClicks);
}
This does what I want. It displays the correct number of clicks. If I click on the middle button twenty times and then click the "Display Points" button, it'll display the right number of points. However, it does it in a popup window. How can I display the number of points inside the browser without using a popup window?
I tried the following code:
function displayPoints() {
document.write(numClicks);
}
This code worked inside the browser but it cleared the screen of the icons, so it's not possible to keep generating points by clicking on the second button.
tl;dr - How can I update variables in real time, on the browser screen, without using a popup window and without clearing the screen? Any help would be much appreciated.
You can use an html element on the page and fill it with data such as:
<span id="numClicksResult"></span>
<script>document.getElementById('numClicksResult').innerHtml=10;</script>
This is an important concept that links HTML and JS:
You need an element to store what you're going to update. This is usually a div.
<div id="myDiv"></div>
Then, in your JS, you need a way of accessing the div.
document.getElementById("myDiv");
This gives you the element, but you need to update the element's value.
document.getElementById("myDiv").innerHTML;
So, you can access the value, but you need to update it whenever there's a click. When the user clicks, you do all of the work you need on your variable and then...
document.getElementById("myDiv").innerHTML = myVar;

HTML5 how to take a print screen on a particular div class or id [duplicate]

This question already has answers here:
Using HTML5/Canvas/JavaScript to take in-browser screenshots
(7 answers)
Closed 9 years ago.
I am using html5 webpage i displayed some product list, this list are inside the div tag this is designed using css. i want to print the product list get the css style.
i need to click a button
that button to capture and display the window particular div class or id.
then to print the div class or id
These links will give you a good idea of what you are looking for
How to take screenshot of a div with JavaScript?
https://www.idontplaydarts.com/2012/04/taking-screenshots-using-xss-and-the-html5-canvas/
They all do it by using HTML Canvas, if you are new to it then here is a tutorial to help you out
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial?redirectlocale=en-US&redirectslug=Canvas_tutorial
There are other ways too. You can also do it by using a Javascript API
http://grabz.it/api/javascript/
or
http://html2canvas.hertzen.com/
Hope it helped !

Categories