I have a image document reader and in the header is an input[number] field. The idea is that the user can type which page (image) they'd like to see and the page will smoothly scroll down to the appropriate div.
Here's my code:
<div class="score-header">
<section class="nav">
<input type="number" id="page" />
</section>
</div>
The document's pages are displayed in their own divs, like so:
<div class="page-one">
<img src="page1.jpg" alt="" />
</div>
<div class="page-two">
<img src="page1.jpg" alt="" />
</div>
Is there a way that when the user inserts the number and clicks enter or a button, that the webpage will scroll down the the document's corresponding page.
N.B. The header sticks to the top of the webpage at all times via jQuery
something like this?
$(document).ready(function(){
$('#page').change(function() {
$("page-div").eq($("#page").val()-1);
//this selector takes the input value and subtracts 1 because the count starts in 0 so it will select the corect div ....
//i do not know how to scroll down.... i tryed this but did not work.... you need scroll to the possition of the selected div
$("#page-one").animate({scrollTop: $("#page-one").offset().top});
});
});
http://jsfiddle.net/ukjvS/13/
http://jsfiddle.net/ukjvS/13/show
(read the comments)
If possible answer my question :)
HTML & CSS blogger side menu?
Related
I have an HTML page in which there are list of images around 4-5. The HTML code of individual image (item-detail.component.html) is shown below:
<span class="badge" id="heart-badge{{item.$id}}">
<div (click)="badgeHeartEmpty()" id="heartHide{{item.$id}}">
<img id="badge-item-heart-noborder-empty" src="/assets/images/Empty-Heart.png">
</div>
<div [style.display]= " 'none' " (click)="badgeHeartFull()" id="heartShow{{item.$id}}">
<img id="badge-item-heart-noborder-full" src="/assets/images/Full-Heart-Blue.png">
</div>
</span>
<!-- This is the code which shows item images and item details -->
<a href="/attendee-item/{{item.$id}}">
<img class="card-img-top" src="{{item.image_url}}" alt="Card image cap" id="card-img">
<div class="card-body">
<div class="auction-item-title">
<h1 id="auction-item-title">{{item.name}}</h1>
</div>
<div class="auction-item-bid-title">
<div class="auction-item-title-left">
<p id="auction-item-bid-title">Current Bid: ${{item.bid}}</p>
<p id="auction-item-bid-title">Value: ${{item.value}}</p>
</div>
<div class="auction-item-title-right">
<p id="auction-item-bid-title2">About this item</p>
</div>
</div>
</div>
</a>
<bid-button [item]="item"></bid-button>
Now if I click above item (as you can see there is a href tag on it) then it shows me detailed description of that image on a new page and that page also has a back button at the top. Below is the code for back button on that new page:
<div class="item-top-bar">
<div class="item-back-bar">
<!-- This is the back button and it takes me to home page but instead it should take me to section of image where I was there and clicked it -->
<p id="item-back-bar-link"><a id="item-back-bar-link" href="/attendee-home"><</a></p>
</div>
<div class="item-pagination-bar">
<a (click)="prevItem()"><p id="item-pagination-bar-text">LAST ITEM</p></a>
<a (click)="nextItem()"><p id="item-pagination-bar-text">NEXT ITEM</p></a>
</div>
</div>
Problem Statement:
Now if I click back button then it takes me to the home page but instead what I want is it should take me to the section of image where I was before.
Is this possible to do? I mean if I have may sections of images and if I click lets say 4th image then it will open detailed description of that fourth image page and now if I press back button then it should take me to fourth section of image where I was before.
If you want to go back, you should use the back() function in javascript
function goBack() {
window.history.back();
}
<button onclick="goBack()">Go Back</button>
Here is a small example of how to use it, now you can just adapt it to your page
You can do that by adding the id here
<p id="item-back-bar-link">
<a id="item-back-bar-link" href="/attendee-home/{{id}}">
// ....
</a>
</p>
Now there are multiple way to get the id. You can use the window.location properties or if in same component pass this id to a property binding
Here is how I would do it.
On a separate note, having the same ID across multiple levels may not be a good idea.
<div class="item-back-bar">
<!-- This is the back button and it takes me to home page but instead it should take me to section of image where I was there and clicked it -->
<p id="item-back-bar-link"><a id="back" href="#">Back</a></p>
</div>
<script>
window.document.getElementById('back').addEventListener('click', function(e){
window.history.back();
e.preventDefault();
});
</script>
Angular has Location which is a service that applications can use to interact with a browser's URL. It is what you need in order to solve your problem.
See implementation below.
<div class="item-back-bar">
<!-- This is the back button and it takes me to home page but instead it should take me to section of image where I was there and clicked it -->
<p id="item-back-bar-link"><a id="back" (click)="goBackClicked()">Back</a></p>
</div>
Your ts file should have these lines.
import {Component} from '#angular/core';
import {Location} from '#angular/common';
#Component({
// component's declarations here
})
class SomeComponent {
constructor(private _location: Location) {
}
goBackClicked() {
this._location.back();
}
}
y not just get the position of the image when it is clicked with .position() and when returned from the image to the page you can get back to the same position with $(window).scrollTop(value).
If your page is scrolled and you want to maintain your scroll position while coming back from the detailed description page, then you can store the current page's vertical scroll position in a service and while navigating back, you can set the scroll position back from service.
Link to ScrollTop in MDN. Also Check Window.To for scrolling.
Sample Angular project to show Element.ScrollTop: https://stackblitz.com/edit/angular-qdjmny.
Click page1, scroll the sample list to navigate, when u com back, the scoll will be maintained.
Also make sure, in your [routerLink] of your detailed description page you are linking to the item-detail.component.html component.
Really theses comments are right. If you want go back page you can use the command window.history.go(-1) or window.history.back()
You can use an anchor tag for this. You need to give the part of the page you go back to an "id", like "gobackto_id". Then you can use this in your "" element in the "href" like this:
<a href="http://www.mypage.be/home#gobackto_id".
Rather new to javascript, jquery and bootstrap, etc., so bear with me. I have a situation where I want to present a list of errors in a model dialog after the user hits a "validate" button. Got all the working - I am generating a list of objects that indicate to the user they need more work to the exact spot that needs additional data entry. I have the the DIV "id" that represents the field that needs more data (and each item will jump someplace different).I do not want a drop down list since there are be lots and lots of these items.
A few questions:
How do I go about jumping from the modal to the main html. I believe I have seen scrollIntoView mentioned in a few other posts as I was looking but will that hop to the DIV and also close the modal?
What construct should I use for the list? A list of scrolling button? The size of this can be quite large (hundreds) so it will need a scroll capability.
Finally, the app is "paged" with a next and prev buttons. I assume that will not be a problem from the aspect of jumping to a page not already displayed?
Here is the current modal code:
<script id="template-validation-error" type="text/x-handlebars-template">
<div id="validationErrorModal" class="modal">
<div class="message-container">
<div class="header">
Validation Errors
</div>
<div class="message">
The following fields are required:
</div>
<div class="center">
<input type="button" class="btn btn-solid-green btn-sm" onclick="fffdevice.validationErrorOk();" value="Done" />
</div>
</div>
</div>
</script>
and
showValidationError: function (fieldlist) {
settings.focusedField = $(':focus');
$("#validationErrorModal").detach();
$(".device-container").append(templates.validationerror({ fieldlist }));
$(".message-container input").focus();
},
validationErrorOk: function () {
$("#validationErrorModal").detach();
if (settings.focusedField) {
settings.focusedField.focus();
}
},
The field list is a list of objects that contain the id (field.id) of the DIV and also a description (field.fieldName) that I want to display.
Here is something I mocked up in paint...I am not sold on it but it show in a general sense what I am looking for:
I don't need a full solution rather, just want mechanisms I can use.
UPDATE
Just to help out anyone else in the future, using the info provided in the correct answer below I have a new code as follows:
<script id="template-validation-error" type="text/x-handlebars-template">
<div id="validationErrorModal" class="modal">
<div class="validation-container">
<div class="header" align="center">
Validation Errors
</div>
<div class="message">
<div class="scrolling-container" style="background-color: rgb(238, 238, 238); height:660px">
<div class="grid grid-pad">
{{#each fieldlist}}
<div class="row click-row" onclick="fffdevice.validationErrorFix('{{id}}');">
<div class="col-7-8 field-name">{{fieldName}}</div>
<div class="col-1-8">
<img class="pull-right" src="/mysite/Content/device/images/fix.png" style="width: 40px; position:relative; top: -5px;">
</div>
</div>
{{/each}}
</div>
</div>
</div>
<div><br/></div>
<div class="center">
<input type="button" class="btn btn-solid-green btn-sm" onclick="fffdevice.validationErrorOk();" value="Done" />
</div>
</div>
</div>
Then the Javascript for the onClick is:
validationErrorFix: function (id) {
$("#validationErrorModal").detach();
var x = document.getElementById(id);
x.scrollIntoView({
behavior: "smooth", // or "auto" or "instant"
block: "start" // or "end"
});
},
Which closes the dialog and jumps to the field. It looks like (I know this is ugly and I will clean it up later):
Bind the modal event to the validation code and show the modal if error(s) are found.
Display the modal with the list of errors using an html unordered list, inside the li element an anchor tag where the href attribute will have a value with the id that corresponds to the input field, all this done dynamically from your validation code.
Once an error in the list is clicked hide the modal using bootstrap $('#your-error-modal').modal('hide'); so the code would be something like this:
$('#your-error-modal').on('click', 'a.error-item', function(){
$('#your-error-modal').modal('hide');
});
I haven't tested this code, but if you're having issues with scrolling to the section of the input and closing the modal you can probably do something like this too:
$('#your-error-modal').on('click', 'a.error-item', function(e){ // use this method of onclick because your list will be created dynamically
e.preventDefault(); // prevent the default anchor tag action
var href = $(this).attr('href'); // grab the href value
$('#your-error-modal').modal('hide'); // close the modal first
scrollToDiv(href); // then take the user to the div with error with a nice smooth scroll animation
});
function scrollToDiv(location) {
$('html, body').animate({
scrollTop: $(location).offset().top
}, 2000);
}
Again this is untested code, but the idea is there.
For UX reasons you might also want to create a floating div or something where users can click on it and go back to the modal to continue reading your list of errors.
I'm implementing a simple jQuery script on a website that loads content from one section of a webpage into the 'display container' on the same webpage.
The content i'm loading is multiple div's which are all wrapped in an outer <div> which has been hidden from view.
I have the display container div and several links the use can click on. Each time they click a link, the appropriate matched content is loaded in to the display container.
My jQuery.
$(".Prod-Link-2").click(function(e){
e.preventDefault();
$("#ITARGET").empty();
$("#ITARGET").prepend('<img id="theImg" src="http://sensing-precision.com/wp-content/uploads/2015/12/page-loader.gif" />');
$("#ITARGET").load($(this).attr('href'));
});
Menu HTML
<div class="MPD">
<div class="Option">
<a class="Prod-Link-2" id ="DEF" href ="/electricalelectronic-products/alf150 #specTable" ><p>SPECIFICATIONS</p></a>
</div>
<div class="Option">
<a class="Prod-Link-2" href ="/electricalelectronic-products/alf150 #COMPARE" ><p>ALF150 v ALF150+</p></a>
</div>
<div class="Option">
<a class="Prod-Link-2" href ="/electricalelectronic-products/alf150 #FEAT" ><p>APPLICATIONS</p></a>
</div>
<div class="Option">
<a class="Prod-Link-2" href ="/electricalelectronic-products/alf150 #ACCESSORY" ><p>ACCESSORIES</p></a>
</div>
</div>
The Target div
<div class="Info-Target" id="ITARGET">
</div>
So my problem is this all works except one of the links.
My hidden div has 4 content divs and 2 tables inside which all have their own IDs. SPECIFICATIONS grabs the #specTable, APPLICATIONS grabs the #FEAT div etc etc.. ACCESSORIES will not load the #ACCESSORY div at all and I don't know why. The script initializes and the page loader gif is displayed, but then instead of displaying the content I'm trying to load.. it displays nothing.
The hidden area format
<div style="display: none;">
<div id ="COMPARE"> some content </div>
<table id="specTable"> some content </div>
<div id ="ACCESSORY"> some content </div>
etc ....
</div>
For test purposes
<div id="ACCESSORY">
<p> This is the accessory div </p>
</div>
No matter what I change the name to in the ID tag and the links href attr, it will not load (I even tried making a new div with a different name and moving the div up to top of the hidden content area thinking it was maybe a loading issue), but if I change the links href attr to one of the tables or a different div such as #FEAT or #specTable.. it loads that fine.
My gut feeling is that there is some qwirk with jQuery and .load() that i'm unaware of.
This problem may be CSS related. I've just taken a look at a couple of products, and wherever the content includes lists, the display appears blank because of extremely excessive white-space.
This CSS rule seems to be the culprit:
.Features li:before { content: url(#)!important; }
I am developing a page in JSP. It has 3 components: Header, Content and Footer. I want that when this page loads the Content part should be fade in to default content i.e. the Home Page, which contains button for register, login and site credits. When user clicks register button, the content in Content part should fade out and vanish and then content of register form should fade in and get displayed. Same for other buttons, but there should not be any change in header and footer. Please help!!!
With use of jQuery... You have working example there...
I'd recommend using a JavaScript library to achieve this.
jQuery has built in fading abilities.
<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />
With the element initially hidden, we can show it slowly:
$('#clickme').click(function() {
$('#book').fadeIn('slow', function() {
// Animation complete
});
});
Using JQuery, you can hide a div by using a selector and the hide() method. For example:
<html>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
function swap_divs() {
$("#div_to_hide").hide();
$("#div_to_show").show();
}
</script>
<body>
<div id="div_to_hide">
Some text for div to hide
</div>
<div id="div_to_show" style="display: none;">
Some text for div to show
</div>
<button onClick="swap_divs();">Click me</button>
</body>
</html>
If you look at the JQuery website you can find more example and extensive documentation. Also for fading in/fading out.
I have a page with two divs, one hidden and one displayed. When I click on a link at the bottom of the page, I want the hidden div to display and the displayed div to be hidden. It works fine, but if the browser height is small (e.g., on a mobile device) the user sees the div that gets displayed scrolled all the way to the bottom.
Here is the page:
<script type="text/javascript">
function display()
{
document.getElementById('div2').style.display="block";
document.getElementById('div1').style.display="none";
}
</script>
<!-- Start of content -->
<div id="div1" style="display:block">
<h2>This is shown at the beginning</h2>
<p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p>
<p>Hello</p><p>Hello</p><p>Hello</p>
<a rel="external" href="bogus.tar.gz" onclick="display(); return true">Click here</a>
</div>
<div id="div2" style="display:none">
<h2>This is shown later</h2>
<p>Goodbye</p><p>Goodbye</p><p>Goodbye</p><p>Goodbye</p><p>Goodbye</p><p>Goodbye</p>
<p>Goodbye</p><p>Goodbye</p><p>Goodbye</p>
</div>
If I put the link at the top of the page, the problem goes away, but the flow of the page demands that the link be at the bottom of the page.
So how can I get the browser to show the top of the div once it gets displayed.
window.scrollTo(x, y)
If you want to scroll the page to the top use
window.scrollTo(0, 0)
Otherwise, change the second parameter.
hide the div1 before displaying the div2.
If it does not run, use a scrollto javascript (based on displayed div) call to fix the issue
document.getElementById('div2').scrollTop=0