I've seen this type of question in Stack Overflow before and none of them help really. I've also Googled it but no dice.
I'm wondering if it's possible to hide the ID from the URL if the user clicks on the tabs itself?
This is the webpage:
www.planet.nu/dev/new-experian/index.html
Then when I clicked on a tab, this is what will happen:
www.planet.nu/dev/new-experian/index.html#dataTab1
I heard that using Javascript can actually hide that but I'm not sure how. My clients are really keen to hide such ID from appearing on the URL even though it does no harm.
This is where I got the plugin:
http://webthemez.com/demo/easy-responsive-tabs/Index.html
If there are no other solutions, then I might have to change the jQuery code for this. :(
What I've done is in 'easyResponsiveTabs.js' search for
var newHash = respTabsId+(parseInt($tabAria.substring(9),10)+1).toString();
replace the line with
var newHash = "";
and then seach for
newHash = '#'+newHash;
replace the line with
newHash = ''+newHash;
Enjoy!
try jquery $("body").scrollTop() function. it will not show the id in the url bar and try not to use many plugins.
$('html, body').animate({scrollTop:$('#dividhere').position().top}, 'fast');
You could use:
window.history.pushState('object or string', 'Title', '/index.html');
Or:
window.history.replaceState('object or string', 'Title', '/index.html');
I often use it - you can find a more detailed explanation here: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history
What you are calling an "id" is a "hash", the hash is used to scroll to an anchor (by default) or can be used by JavaScript to signal things like tab switches, or internal page switches, or really anything you want. You don't always want to remove them (because it might break some JS functionality) but if you do want to you can use:
location.hash = "";
Don't use plugins you don't understand. This was made on purpose. Of course you can modify this plugin - set historyApi to false in line 24, but I advise to write some code from scratch and learn jQuery. Simple tabs are basics. Level 0... It's not hard.
Related
I need to frequently (e.g. every minute) update this news website and afterwards scroll down to "Zeit" (="time") each time...
...which equals class="Zeit ft-vsbl ft-first-column" in HTML-code. For the updating-part I found this handy Firefox add-on, which luckily also allows to run some Javascript/jQuery code snippet after each reload and I used this possibility for the second part of scrolling down by passing this code to the add-on:
var $container = $("html,body"); var $scrollTo = $('.Zeit ft-vsbl ft-first-column');
$container.animate({scrollTop: $scrollTo.offset().top - $container.offset().top + $container.scrollTop(), scrollLeft: 0},300);
This worked for some time like a charm. Unfortunately, however, something — probably in the structure of the website — recently changed and this code no longer scrolls down to the desired position (it just scrolls down too little) and I lack the Javascript/jQuery knowledge to adapt the code accordingly.
Can somebody please help me and get 10 points? 😊
I am not familiar with that Firefox addon, but it works properly in console.
I would recommend just to delete this part
- $container.offset().top + $container.scrollTop()
Like this:
var $container = $("html,body"); var $scrollTo = $('.Zeit');
$container.animate({scrollTop: $scrollTo.offset().top, scrollLeft: 0},300);
This will always scroll to your element $('.Zeit'), even if you are in the bottom of the page. And the old code supposed that you are always at the top of the page. Maybe it will help you.
Your code must have stopped working because the website structure has changed like you said. With the current version of the website var $scrollTo = $('.Zeit ft-vsbl ft-first-column') cannot identify the part to scroll into (it returns nothing).
Let's make it simple. id is usually better to identify an element because id is meant to be unique. id is prefixed with # in a query selector.
document
.querySelector('#WNachrichten_Marktberichte_Home_Index')
.scrollIntoView({
behavior: 'smooth',
});
Website structure may change anytime. I recommend learning the technique for yourself. Here're the references.
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
I've implemented the following javascript code to use the autocomplete feature within the text field question in Qualtrics.
Qualtrics.SurveyEngine.addOnReady(function()
{
var textOptions = [
"Adam", "Athelney", "Baring"
];
jQuery('.QR-' + this.questionId).autocomplete({
source: textOptions,
minLength: 3
});
});
The code works; however, the autocomplete suggestions appears at the end of the page (below "Powered by Qualtrics" URL link). See the first screenshot:
I am not sure whether this is a bug within Qualtrics; however, I've tested the same code on an account provided by a different University (see the second screenshot below) where the same code works as expected (the suggestion appears right below the question, not at the end of the page) so I am left puzzled by this behavior.
Any ideas what may cause this behavior and how to resolve it? (both examples don't use any custom CSS or such but they are accounts hosted at two different Universities) Thank you.
Based on the comment above, copy the CSS html.JFEScope body#SurveyEngineBody ul#ui-id-5.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front rule from the working version to the Look&Feel>Custom CSS of the non-working version. The important part is the contents of the rule. Presumably they are different.
Although the classes are in a different order the only difference between the two selectors is the id of the ul element. Make sure you use the correct id (they may be different in the two surveys).
A bit late, but jquery autocomplete looks for .ui-front on a parent element; if it's not set you need to explicitly add a selector with the appendTo option in your custom js code for that questions.
var yourSourceList = ['foo', 'bar', 'baz'],
$elem = jQuery('.QR-'+this.questionId),
$elemParent = $elem.parent();
jQuery($elem).autocomplete({
source: yourSourceList,
minLength:3,
appendTo: $elemParent
});
I need to add some text to a URL bar without deleting what's already there(as I've mentioned in the title). Basically, I have eight or so hashes(/one/, /two/, /three/, etc).
I have to add these to the URL bar without deleting the previous hashes that are already in there. For example, I could have a button that adds "/two/" to the URL, but what if "/one/" is already there? I need it to make it so that it just adds the new hash after the one one, like this - "/one/two/three/".
I've tried using
Hide "one"<br/>
and
Hide "two"<br/>,
but unfortunately when I use the second one after the first, it just replaces "/one/" with "/two/".
Any suggestions would be great. Let me know if I need to provide some more context, I'm not quite sure what's relevant to this question in my code.
Thanks in advance, guys!
You just need to use a function
<a onclick="addHash('/one/');">One</a>
<a onclick="addHash('/two/');">Two</a>
function addHash( hash ) {
window.location.hash = window.location.hash + hash;
}
You will probably need to do some checking in the addHash function to see if it exists already, but thats a good place to start.
Maybe a little more description on what you are trying to achieve here?
Are you just trying appearance of the URL, or are you trying to navigate to pages with these arguments?
I'm sure PHP would solve this with the following but I'm not sure why you would use it.
One
Two
If you're using jQuery you could do:
One
Two
<script>
$(function(){
$('.addToUrl').click(function(){
var href = $(this).attr('href');
window.location.href = window.location.pathname + href;
});
});
</script>
I have a template that gets screenscraped from an outside vendor and need to include absolute paths in the navigation so the externally hosted content will properly link back to our site.
Right now the page/template is driven by a global menu app written by our back end development staff... so anyone who updates our site goes in and changes the menus and their paths...
Right now all of the links are linking to relative paths back to the root.
For example
Home
News
Media
Other
I need a simple way (preferably with jquery) to prepend "http://www.domain.com" to each of those links.
Please note that jQuery object $("a").attr("href") is not equal to $("a").get(0).href ?
$("a").each(function() {
alert(this.href);
$(this).attr("href") = this.href;
});
In you case, this may not help you , because you want static markup, javascript generate dynamic content. But it seems that you want static markup in that case it has to be emit by server.
$('a').attr('href', 'http://www.domain.com'+$(this).attr('href'));
I don't recommend using javascript to solve this issue. This should be solved in the page template. However, if you still want a jquery solution then here you go. Assuming those links have a specific class that distinguish them from internal links:
$('a.external').each(function() {
$(this).attr('href', domain_name + $(this).attr('href'));
})
you don't need jquery for such a simple function....
var elements = document.getElementsByTagName("a");
var eachLink;
for (eachLink in elements) {
var relativeLink = eachLink.href;
var absoluetLink = ["http://",domainName,"relativeLink"];
eachLink.href = absoluteLink.join("");
}
something like this should work, and it runs much faster and you won't need to load the entire jquery library just to run 6 lines of code :P
It's very simple:
$('a').each(function(){$(this).attr('href',this.href);});
When you read the href property of a HTMLAnchorElement, you get the absolute path, so you can overwrite it with attr() method of JQuery.
I noticed that all the solutions here only work with href attributes that begin with a "/" character. If you want something more robust, you may want to try the js-uri library. It looks cool but I haven't tried it myself so I don't know how buggy it is.
I am interested in the floating effect of SO when pressing the newest link:
Which library would you use in jQuery to make the floating effect?
If you look at that page and view the source you can see exactly what they're doing. It's really only about 10 lines of javascript that scrolls to the section you want to sort when a link is clicked:
$.scrollTo("#answers-table", 400);
Then it calls the API using jQuery with the href supplied on the sort link:
var url = $(this).attr('href');
$.post(url, function(result) {/*function code is below*/})
Then the function that is specified for the callback replaces out the entire div you just scrolled to with the result:
var domelement = $(result);
$("#answers-table").html(domelement);
The actual tab styling is just specifying a different class for the link to change the color. This is also not exactly the order in which things are done but it's pretty close.
Someone please let me know if discussing the way StackOverflow's site works is against any sort of TOS.
This looks like tabs but with some CSS to make it look different.
http://jqueryui.com/demos/tabs/