I am trying to save the scroll position of a page, when we go from that page (a product list) to a product, and then back to the product list. The only scenario this scenario should occur is when going from prodlist to prod to prodlist (pressing back).
My first thought was to check the URL from history in javascript, but history.back is not read, it's only action.
you can use jquery and call Position method or. Offset method on the window.
And get x and y from top and left.
Then store the x, y into a localStorage.
Localstorage is for HTML5 very easy.
And when user back to old page, read x, y from. Localstorage
Example : localStorage. SetItem(name , value);
LocalStorage. GetItem(name );
Okay, we've found a solution. Apparently we already had an implementation of breadcrumb navigation, so I simply just pulled the middle element (we have 3), to check where the user was before the product. If the back button is pressed, we have our filters preserved.
Therefore, the only thing here was to query for products on the productlist equal to the middle href in the breadcrumb, and scrollTop to the product.offset().top, and bam.
Have a good day whomever reads this.
Related
I'm hoping to select a particular Region to highlight on the page load based on the link the user follows to get to that page. This is a drill-down report with multiple options, so the goal is to have all options available but focus on the one the user selected to reduce the number of times a user has to navigate to/from the base report to the drill-downs.
Currently, I'm trying to implement this solution https://svenweller.wordpress.com.../, further explained in an Oracle Community discussion here: https://community.oracle.com/..., but it is not working for me.
What I have now is similar to what is shown in those examples, and for now I'm just trying to link to a static Region Display Selector (RDS) tab (the goal will be to have the selected Region be dynamic based on which link is clicked in the feeder page, but I'm clearly not there yet).
I have a Dynamic Action set to fire on Page Load event, and a True action that executes JavaScript code and uses the JavaScript in the example (both with and without the Timeout function suggested in the Oracle thread). I have set Static IDs for the RDS and Region, but when I load the page the RDS still defaults to Show All (or the first region if Show All is off).
Can someone help me understand what I'm doing wrong?
Thanks.
let sesStorage = apex.storage.getScopedSessionStorage({
useAppId:true,
usePageId:true});
setTimeout(sesStorage.setItem( "tabs.activeTab", "#R3" ) { apex.region("tabs").widget().aTabs("getTabs")["#R3"].makeActive();}, 300);
\\version without setTimeout
let sesStorage = apex.storage.getScopedSessionStorage({
useAppId:true,
usePageId:true});
sesStorage.setItem( "tabs.activeTab", "#R3" );
I have done something like this in the past. Create a hidden variable on the page P1_TEST, make sure to set the value not to be protected.
You will need to set the value of that variable when the link is clicked.
Then you need to add static IDs TAB1, TAB2 etc. to the tabs of you region display selector.
Then add a DA on Page Load:
if (apex.item("P1_TEST").getValue() === "Value1"){
$(".apex-rds [href='#TAB1']").trigger('click');
} else if (apex.item("P1_TEST").getValue() === "Value2"){
$(".apex-rds [href='#TAB2']").trigger('click');
}
I have this problem: I use Yii2 and, when I go to an index page, I select a view for an element (Example, I go to the page 4, because I want to enter in the view of the element with ID 41, which is at the page 4 because I have the pagination set to 10). This is ok for me but, when I enter in the view, I have this link to come back to the index:
<?= Html::a ( "Back", ['codici/index/','CodiciSearch[IDCodice]='=>$model['IDCodice']], ['class' => 'btn btn-primary']) ?>
Actually, this return to the index, but it show me only the record with the ID that I pass to the link. So, in this case, only the record 41. I want, instead, that the Back button turn to the previous page checking the pagination in which I was, and not only the ID. So, the link must checking the pagination of an ID. I hope to be clear. I don't need a solution like "window.history.go(-1)" because this create a problem if I came to the view by another way. I would to have a specific option: the link must to return to the index and get the pagination of an ID (so, in this ex. case, to the page 4).
I hope to be clear. Thank you in advance!!!!
Here are the solutions I use:
most times I just open the target page in a new tab. That is the simplest solution. If this is acceptable then simply add a parameter to the Html::a options as follows:
Html::a(“text”,[url],[‘target’=>’_blank’]);
Note: if the link is within a Gridview you need to set the format to raw (“format”=>”raw”)
on the index page, pass the pagination number to the new page.
Html::a(“text”,[url, ‘index_pagination’=>5]);
You can then use this in your button
instead of passing the pagination, you can capture the referring page and send the user back:
$url = Yii::$app->request->referrer
This is easy but it can cause challenges if the user reloads the page in which case the referring page is the current page.
(This question pertains to the react-virtualized library)
I have a component that uses <List> to display several categories of items. The resulting output looks something like:
Jump to: Planets, Nebulae
PLANETS
- Mercury
- Venus
- Jupiter
- ...
NEBULAE
- Horsehead
- Ant
- Boomerang
- ...
I'd like to use the "Jump to" links to scroll to the start of the corresponding section in the list. If I scroll around some I'd like subsequent clicks of the jump link to take me back to the section.
The first time I click the "Nebulae" link it works fine, but nothing happens on subsequent clicks. I assume this is because scrollToIndex is a prop and doesn't change after the first click. I've tried using forceUpdateGrid but it doesn't seem to reset the scroll position.
Is there a way to jump to the same index multiple times in a row?
Unfortunately, this is a limitation of the props approach. (react-virtualized only manually scrolls when it detects a new prop. Otherwise, users would be unable to scroll with their mouses once an initial prop was set.)
One way to work around this is to unset the scrollToIndex prop once you've set it (so that if you then reset it, it will still be a new value). Temporarily unsetting it (aka resetting it to undefined) will have no affect on the list either so you should be fine.
Looking for a way to keep track of clicks in JavaScript. I have a series of javascript controlled sides in separate div wrapppers. I'll need a counter that will keep track of the previous slide number that was clicked. This will be used to fade out the previous div when the new div loads. The HTML page will not reload so I don't think I can use the browser history function as an option. I really only need to know the previous slide number since the slide numbers can be clicked out order.
You can make a variable and update it everytime when there has been clicked on a new slide, but I think it's easier to just fade out all the slides, then fade in the slide that was clicked on.
This way you don't need to know which slide is currently shown.
Léon
If you expect the user to never reload the page, then what is keeping you from simply using a regular JavaScript variable?
var currentSlideIndex = 0;
function nextSlide() {
currentSlide = currentSlide + 1;
if (currentSlide >= slideCount) {
currentSlide = 0;
}
}
You'll find that many similar HTML5-slide packages, keep track of the current slide in the document fragment identifier of the browser. When you do that, the slideshow can survive an F5 and users can send links to the current slide by copy/pasting the address.
The best option is to use History.js, but it's a bit of overkill. The bonus is that it's semantic, and will keep the state on browser reload. Also the back button goes to the previous tab.
Other solutions depend on your setup, and your libraries that are available (jQuery, etc.). If you're using a standard plugin for something, they usually have callbacks for when the state changes. Check the API.
The basic algorithm is applying a click handler to each button. You can store a global variable containing the current state. Give a class like .slideButtons to the absolute buttons (page1, page2, page3, etc.) and a id of #nextSlide and #prevSlide to the next and previous buttons selectively. In the handler, check the class and id. If it's nextSlide, or prevSlide, add one, or subtract one, and then update. If it's one of the absolute ones, search in the parent node and count the matching classes until you find the one you're looking for. The number of your counter when you reach your pressed button is the new state. Set it, and update the slider.
I read from the documentation that we can handle the back button click using the following code:
document.addEventListener("backbutton", backKeyDown, true);
function backKeyDown() {
// Call my back key code here.
alert('go back!');
}
My concern is that I have a single HTML5 web page in which I have multiple div tags which I animate using jQuery as per the navigation option selected by the user from the menu options.
How can I, in this single page webapp, handle the back button click using PhoneGap and show the user the previously animated div. Clicking on the back button again would again take him to the previous div of the current previous div :-)
Thanks.
I solved the problem by creating a global array variable as
var myStack = new Array();
Then whenever I clicked on the div tag, I inserted the function prototype along with the arguments inside the myStack variable. For eg:
myStack.push(\"myfunction(args1, args2);\");
Then, using the code which I posted in my question, inside the BackButton handler, I wrote the following code:
var divToShow = myStack.pop();
eval(divToShow);
Hope this helps others.
I did an implementation in a similarly structured phonegap app. My situation was a bit more complex because I was loading in html as well as external data via ajax (rather than just unhiding divs). I created a global array called history which I used to keep track of current position as well as previous positions (position here being the most recent ajax function called, so the array was actually storing function names as text). The right sequence and combination of .pop and .push array methods got me a fully functioning js back button that scaled nicely and handled any kind of back and forth navigation I could think of.
I will just post my overall idea of handling this situation. Hope you can improvise and change it to suit your needs.
Have a global variable to remember the current div id that is
visible. For example, when a menu item x is clicked, set this global
variable to the div id that is currently visible (before showing the next div corresponding to menu item x).
When the back button is pressed, use the global variable's value to identify the previous div. Hide the current div and show the previous one.