I'm using smoothscroll.js on my website, that uses the 'click' function.
It works great, problem is - it translates ALL links to toggle with the smooth scroll. This is problematic as I'm implemented small jQuery tabbed areas within a few of the vertical viewports.
Is there another function that acts similar to click that I can use interchangeably?
This is the smoothscroll.js I'm loading on my site
Why not use my smoothScroll plugin? It allows you to define in which elements the links should scroll smoothly:
$('#smooth').smoothScroll(); // will only affect links in #smooth
You can also define the animation speed:
$('#smooth').smoothScroll(400); // scrolling takes 400ms
Here’s a demo: http://mathiasbynens.be/demo/smooth-scrolling
I see in your question that you've added the JQuery tag. The script you use doesn't seem to use JQuery, I've not read each line, but it looks pure JavaScript.
In the javascript file, replace the line:
var allLinks = document.getElementsByTagName('a');
By this JQuery selector:
var allLinks = $('a.fooClass');
And add class="fooClass" to all the a tag you want to activate smooth scroll.
BTW: I found unacceptable that you have to edit the script to do so. If I was you I would look for a more solid JQuery plugin.
You might be interested by theses links:
http://www.sycha.com/jquery-smooth-scrolling-internal-anchor-links
http://www.devirtuoso.com/2011/11/smooth-scrolling-in-jquery/
If you don't want all of the links in your page to have this behavior, then you need to modify and narrow down your selector. I'm guessing you're doing something like:
$('a').click(...
Instead, use a CSS class, or if it's only one item then use an id. Say you assign a CSS class to the tabbed areas links, then you'd do something like:
$('a.YourNewClass').click(...
I hope I am understanding your question correctly. If not, please let me know.
Related
Similar to how some CSS can be executed by events like using :hover, how could I make the same code execute when the user is simply viewing that part of the page? Example: user scrolls down to footer, and some nice CSS effects execute. I'll add a javascript tag to this thread incase that would be needed.
Edit from comment: Some more context...I have a button with a bunch of CSS effects already in place, and was just looking to "activate" them upon viewing.
CSS is not made for that. You will have to use Javascript.
You could check out this JS library, because it's not possible with CSS.
http://mynameismatthieu.com/WOW/docs.html
You cannot do this in CSS. You will need JavaScript.
If you are using jQuery, it offers a :visible selector. EDIT: jQuery's :visible selector is not the same as "in viewport", as #mplungjan pointed out. #mplungjan also found this page on viewport selectors for jQuery: http://www.appelsiini.net/projects/viewport
I found some really awesome link detection regex that works unbelievably great. It takes only the main part of a link and displays it as the body of the anchor tag and the whole link as the href. In example http://somesite.com/index.php?some=var will simply look like somesite.com. Which is just pure awesomeness, but then again it has its down side as well because someone might pass some variables that you might not necessarily want to send for some reason and I figured I need to display the whole url in the anchor body. Sadly I don't want to just give up on beautiful anchors and I decided I should display full link upon some event and thus came the trouble.
First I thought I should go for mouse hover (jquery's mouseenter) to display full link and then use mouseleave to make it beautiful again. Unfortunately that was unsuccessful due to short site names at the end of a line with a bunch of parameters. Example: If there is an anchor with body site.com and href http://site.com/some/params at the end of a line, after expanding it will go to the next line which would trigger the mouse leave and thus compressing it, which would by it self return the link to the original line and trigger the expand function creating an infinite loop.
Second idea was to have a right-click expand the link. Obviously the context menu on links that are to be expanded has to be disabled. Unfortunately, again, having the same link at the end of a line would cause a context menu to show up because after expanding the right click is also triggered at the blank space where the short link used to be.
I seem to have run out of ideas, does anyone have any?
Without breaking layout, you can use the native title property to display the full URL or, for something more customizable, a plugin such as jQuery UI's tooltip widget.
<a href="http://www.shorturl.com/?param=notSoShortUrl"
title="http://www.shorturl.com/?param=notSoShortUrl">shorturl.com</a>
Provided the title attribute is outputted in the initial markup, this solution works even with JS disabled. And if you feel like, jQuery UI tooltip may help customizing it for JS-enabled users.
If anyone is interested in how to patch the line-breaking issue described in the OP, here's my original solution to achieve non-line-breaking extensible links:
aaaaaaaaaaaaaaaaaa.com
$('a').hover(function(e) {
$(this).text(e.type == 'mouseenter' ? this.href : $(this).data('shorturl'));
}).each(function() {
$(this).css({
width: this.offsetWidth,
whiteSpace: 'nowrap',
display: 'inline-block'
}).data('shorturl', $(this).text());
});
Demo
Though, this is mostly a CSS hack and link text may leak outside of the container (and obviously, won't work if the container has overflow:hidden), so it is not very good for layout purposes. Better stick with title or the tooltip plugin.
Is there any way to add separate CSS and Javascript files those work for only particular section of a page and don't affect any other part of the page?
I am attempting to add the following to my web page:
http://codecanyon.net/item/sliderjs-js-framework-for-slider-development/full_screen_preview/1617841
When I used it, the CSS and JS files affect my whole web page.
I don't want this to be happened. I want to add a slider without changing my site totally.
Is there any way to get it working without adding all of the slider's CSS and JS code to my webpage?
Its possible to do this using an iframe as a sort of sandbox. But it begs the question, what are you trying to "protect" the page from? If you have name conflicts, you're best fixing those rather than sandboxing the slider.
If you want to have JS and CSS specific to a certain part of a page, and you don't know JS and CSS, the only way is through iframes.
If you've made the CSS yourself, you can just add a prefix to apply it to on certain sections. Not like this:
p {color:pink}
instead, add a prefix, like this:
#menu p {color:pink}
#content p {color:black}
Your JS should only apply to elements based on id, unless your using something like jQuery. If you're using jQuery you can apply changes only to certain elements in the same way as CSS. eg.
Not like this:
jQuery('p').slider();
instead, add a prefix, like this:
jQuery('#content p').slider();
You can use iframes for this. Create a new page with your CSS and JS file included in it and call that page from iframe.
I chose jQuery Mobile over other frameworks for its animation capabilities and dynamic pages support.
However, I'm running into troubles with styling. I'd like to keep the basic page style in order to perform page transitions. But I also need to fully customize the look'n feel of headers, listviews, buttons, searchboxes... Dealing with colors only is not enough. I need to handle dimensions, positions, margins, paddings, and so on.
Therefore I struggle with extra divs and classes added by jQuery Mobile in order to override them with CSS. But it is so time-consuming, and it would be way faster to rewrite css from scratch...
Is there a way to load a minimal jQuery Mobile css file ?
Or should I look towards an other mobile framework ? I need to handle page transitions, ajax calls, Cordova compatibility, and of course a fully customizable html/css...
Methods of markup enhancement prevention:
This can be done in few ways, sometimes you will need to combine them to achieve a desired result.
Method 1:
It can do it by adding this attribute:
data-enhance="false"
to the header, content, footer container.
This also needs to be turned in the app loading phase:
$(document).on("mobileinit", function () {
$.mobile.ignoreContentEnabled=true;
});
Initialize it before jquery-mobile.js is initialized (look at the example below).
More about this can be found here:
http://jquerymobile.com/test/docs/pages/page-scripting.html
Example: http://jsfiddle.net/Gajotres/UZwpj/
To recreate a page again use this:
$('#index').live('pagebeforeshow', function (event) {
$.mobile.ignoreContentEnabled = false;
$(this).attr('data-enhance','true');
$(this).trigger("pagecreate")
});
Method 2:
Second option is to do it manually with this line:
data-role="none"
Example: http://jsfiddle.net/Gajotres/LqDke/
Method 3:
Certain HTML elements can be prevented from markup enhancement:
$(document).bind('mobileinit',function(){
$.mobile.keepNative = "select,input"; /* jQuery Mobile 1.4 and higher */
//$.mobile.page.prototype.options.keepNative = "select, input"; /* jQuery Mobile 1.4 and lower */
});
Example: http://jsfiddle.net/Gajotres/gAGtS/
Again initialize it before jquery-mobile.js is initialized (look at the example below).
Read more about it in my other tutorial: jQuery Mobile: Markup Enhancement of dynamically added content
...or just use the official, theme-less version of the CSS built specifically to allow the design of a custom theme while maintaining all of jQuery Mobile functionality.
You don't have to fight with hacks and overrides all the time and you get a lighter CSS.
Win-win.
edit: Also answered here
To be honest i'm fairly disappointed that jQuery mobile didn't provide us with a relatively style-free starting kit, to work merely with what you have said: Ajax, transitions, cordova...
Overriding the generated css classes is absolute madness, but I have done some skunk work and I managed to reduce the uncompressed css file size from a whooping 233kb to merely 27kb, while keeping the important aspects of the css such as transitions, one-page viewing, etc. This way you start almost as you would start with an empty css file.
Perhaps I will upload the file on Github, if there's any demand for it. I wish to do some more testing to see that I didn't leave anything significant behind.
as of jQuery Mobile 1.4.0, the data-enhanced data attribute was added to most of components. Setting this as true attribute will cause jQuery mobile to ignore style enhancement for the component, so you'll have to style the element by your own.
additional information about this in the jQuery Mobile 1.4.0 release notes here
http://jquerymobile.com/upgrade-guide/1.4/
i m nô expert but i would love to share à weird method with you . Actually, it s very hectic task : what you need is to edit the jqm css line by line by deleting the property values just leave them blanks before ; you have just to look after the desired sections of the CSS file to adjust or delete value
Do not forget to attach your link rel of your own CSS at the head of your HTML page
I hope it will work for you
Seems like to me there should be an option for that but i can't seem to find it.
This question was asked many times but only workarounds were answered and that's not what i'm looking for.
I am changing my css incode and i want to load the original css back instead of coding it myself, how can that be achived?
I don't wanna reload the entire file, just load some div or class css.
See this post for a solution.
Based on that you can do something like this:
$("#fix").click(function(e) {
e.preventDefault();
$("div").removeAttr("style");
});
Note: This assumes you are using JQuery to change the styles in the first place
Here is a working example
if you're using jQuery apply
$(selector).removeAttr('style')
to your elements
I want to load the original css back instead of coding it myself
This is not necessary. You are trying to reload a resource that should just continue to exist. Once it's loaded, you don't need to load it again. If you need to override a style, apply a class to it. To revert to original, remove the class. That's how cascading style sheets work.
If there is a particular reason the css needs to be dynamic, you can try loading css into the Document via the DOM (document.createElement("style") etc.), but support for this is a bit sketchy I believe.
if you want to reset the WHOLE style and not only divs' you'd better use the all selector
$('*').removeAttr('style');