I'm having a hard time with a button and hope you can help me. The button - Next - is on the first page of subscription page, when clicked it goes to the register page but is keeping the scroll down - showing the footer and not the begining of the form. I tried to use offset, criating another div, add a new function, scrollTo, and nothing seems to work. Any tips are welcome! tks
There's something odd in your sequence of pages but to surely address your problem, on your registration page (that loads scrolled down), run this once the document is ready:
window.scrollTo(0,0);
Related
On my website, and seeimingly on every page on the internet that I'm searching on this problem exists, and I am wondering if anyone has a solution to this.
If a website has a navbar at the top, then you click your cursor on a textbox, scroll down on the page so the textbox is out of view. Start typing and the page will scroll back to the tetbox that you are typing on, except the navbar will be blocking the actual text, there is no offset to account for that navbar height.
Here it is in action on w3schools.com for example:
https://www.w3schools.com/html/html_forms.asp
I have set my cursor to the "Last name:" field.
Now I scroll down so the field is out of view.
Now start typing again. You will see the website scroll back to the field so it can be in view at the top of the page. But note that the navbar at the top is blocking it.
This is prevalent all over the internet. w3schools for example and even facebook.
Has anyone every noticed and solved this issue? I don't even know where to start.
I really need help. I am unable to find any examples to this particular problem. I have spent many hours and really want to give up. We have never covered this in the program I am in and I really do want to learn even how to begin. I spent 5 plus hours working on this and came up with a solution that worked but since it did not follow all rules it was not accepted. We have not covered tooltips so I’m not sure how to go about this.
The question is to write a tool-tip that can be invoked for any html element on a given page. The preferred position can be viewed left right or bottom of html element. Should contain title, Content, Okay button that will dissolve after user clicks the okay button.
api to be used is
$('#HTML element').showToolTip ( {
Title: 'This is the title'
Content: 'This is the content'
onApprove: function() {
//to be called after Okay button is clicked.
}
} );
showToolTip is a jQuery plugin to create a tool-tip-style alert popup which can be attached to any element when triggered.
It provides a callback function which will be fired when the user clicks on the Okay button inside the alert popup.
The plugin grabs dimensional information about the popup, host element and the viewport width and height to calculate in which direction to show the alert popup. For example it automatically re position the alert popup if TOP, RIGHT, BOTTOM, LEFT doesn't have enough space.
Visit this link to see how to use
I am working on alpha.dubaiexporters.com.
http://alpha.dubaiexporters.com/aboutus.aspx
Upon resizing the browser, the blue button panel comes and after clicking on it, it shows the navigation side bar.The issue is that after clicking somewhere else, it does not disappear.
I don't seem to find the issue here. The home page is not creating any problems. Rest pages do.
You can add to end of your code when you activate the menu and
$(".container").on("click", function(){
$(".menu-btn").click();
});
And inside the menu-btn.click() add a $(".container").off(); so it toggles the behaviour.
I have a word press navigation bar which has 2 buttons Home and Contact. When hovering on the contact page there is a sub item called number. How do I stop the user navigating to the parent link? and only allow them to selected number and navigate to that page.
The quickest way would be to create that parent menu item with a URL of #/ which will prevent the click. It will append #/ to the url in the browser, but other than that nothing else will happen. Note that the slash at the end will prevent the page from scrolling to the top when clicked which is especially useful if you have a sticky menu.
If you want to prevent the URL from changing in your browser you can add some Javascript to prevent the click event for links with a href of #/ like this bit of jQuery...
$('a[href*=\\#\\/]').click(function (e) {
e.preventDefault();
});
As Jaxon said in the comments, you could then use CSS to change the cursor on those parent items (to default perhaps).
If you felt this method was too "hacky" you could use a Walker to actually override the output HTML, but depending on your implementation that feels like overkill to me for such a small effect. Plus, once you strip the a tag out you could run into other issues with your menu if your dropdowns require that tag to work properly.
You can try these steps in the wordpress console.
https://connectnc.com/clients/knowledgebase/112/How-to-make-menu-item-unclickable.html
I nailed down a weird behavior on JQM.
Since the page is based on JQM Boiler plate, I do not include the full page here. I published the code on jsfiddle.
Here is a summary of the behavior click actions:
Here is the extract of the relevant code:
<div id="oneapart"
data-add-back-btn="true"
data-back-btn-text="List"
data-role="page"
data-title="Home page">
I do not understand why the last click on the List button (a jquery mobile back button) requires 2 click to actually act on the link. In fact, the weird behavior is that a first click highlight the button in blue, but it remains as is without switching to the previous page until a second click happens.
Any help will be appreciated.
Regards.
This issue can be fixed by adding the data-rel="back" to the button in the popup.
The issue posted on Github has been marked as resolved because of that.
The issue happens because data-rel="back" is missing in the link of the large cancel button in #jerone his fiddle. See "Closing dialogs" here: http://jquerymobile.com/test/docs/pages/dialog/index.html
The back button on pageTwo is dynamically created. When you don't use data-rel="back" on the link that brings you back from dialogThree (which is also a page) to pageTwo it adds an item to the history stack. That's why the back button on pageTwo then requires two clicks to actually bring you back to pageOne.
The active state is removed from a (back) button on the pagehide event. On the first click you stay on the same page, so this event doesn't fire and the button keeps the active state.
I added data-rel="back" and then everything works as expected: http://jsfiddle.net/jEesE/6/
Closing as resolved.
The bug you're describing consists of 2 parts;
why does it require two clicks to revert?
why stays the button active (blue)?
The first part of the bug is not a bug; you open a popup, but instead of going back (e.g. data-rel='back' you open a page that is the same as the previous one. So if you press the back button, it reopens the previous page that is actually the same page as you were on right now (if it make sense).
Why the button stays active, I don't know...
EDIT: I cleaned up your code a bit: http://jsfiddle.net/jerone/jEesE/3/