Different alternatives to jQuery scrollTop? - javascript

At the moment, I am learning how to write in javascript and jquery. I am wondering if there are any alternatives that can be used to scroll through (up/down) classes which are in a div (Not the whole body). Thank you in advance for the help.
PS: I tried to use ScrollTop but for some reason (I have no idea why) after refreshing the page on Firefox, IE and Edge the script starts to act really weird. For example, if I press button A to scroll to a class called "A" after the refresh when I press the button A it goes to class "C", for example.
PSS: The alternative method can be in javascript or jquery. Doesn't matter.
Best regards,
George S.

If you want an alternative you can use internal links. For use this HTML feauture you set a name attribute to the content section header where you want to scroll like this:
<a name="aDiv">A Section</a>
and set the href attribute to the ancor link like this:
Go to A Section
This is another approach and must be integrated with CSS for getting the result that you want.

Related

CKEditor5 wrap custom widget in a link, but prevent link clicks

I am trying to implement a custom widget plugin for CKEditor5, but am having hard time creating a widget that would prevent link clicks so that user stays on the same page and can edit the component itself.
I've initially started with this structure:
pluginWrapper > contentItemA + contentItemB + contentItemC
but although that mostly worked, balloons for that widget were misaligned. Meaning if I set a link it wrapped properly and link clicks actions were prevented, but the floating bar for link edit was misaligned as pluginWrapper was also positioned to "float: right";
So, I've tried to get some inspiration with a figure as e.g. visible here in the editor demo at the top of the page: https://ckeditor.com/docs/ckeditor5/latest/features/images/images-overview.html
Here, if you set a link it works properly, including the balloons. Apparently because the figure is floating but all content is not. So I tried doing the same. Unfortunately unlike in the official example my link now became clickable when editing, which is far from desirable :(. And I can't prevent that with css to keep the content clickable and editable and my attempts in JS were not successful.
I was somehow hoping it does this automatically, either by the evt.stop() or data.preventDefault() here: https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-link/src/linkediting.js#L267 (definitely looks like it should), but it doesn't seem to like my plugin.
I have also tried doing something like that as part of my plugin, but that made no difference.
Either I am missing something or I am thinking I perhaps set the link up incorrectly. But if I omit that from my plugin and set the link up manually it still behaves this incorrect way :(.
However yes, this may not be the proper way to do this from the code, as I just add these attributes:
attributes: {
linkHref: "https://www.xxx.zz",
target: "_blank"
},
to the pluginWrapper (under pluginTopWrapper > pluginWrapper), and it ends up doing pluginTopWrapper > a > pluginWrapper with the a tag having the proper link, but seems to also ignore the target attribute :/. But I guess me being unable to set the link properly in code still doesn't explain why would the link be clickable when set up manually (using the link button in the editor toolbar) around my widget.
If you have any thoughts on this it would be very much appreciated. Thank you!

How do I track/troubleshoot a <div> or <class> attribute?

I'm troubleshooting a scrolling gallery with standard left and right navigation arrows. I'm wondering if there is a way to track when a specific div or class tag is modified upon loading the webpage. My problem is that
<class="next browse right disabled">
is being applied to my right arrow when it should be
<class="next browse right">
It is a heavily modified jquery-tools scrolling gallery that someone else wrote and I'm just not sure how to approach this. Any advice/help is appreciated!
Jquery does not have any baked in event that can help you intercept addition/ removal of a class to div. You can at anytime use jQuery hasClass to see whether a particular class is applied or not.
$('#mySelector').hasClass('right') //returns a boolean
You can take advantage of chrome dev tools breakpoint debugging if you are performing these actions via javascript.
Finally, if you insist on capturing class change, then you must raise your own event. Please see this question:
jQuery - Fire event if CSS class changed
I'm not sure if this works:
$('next.browse.right.disabled').removeClass('disabled');
or
$('next.browse.right').removeAttr('disabled');
Maybe DOM Breakpoints in the Chrome devtools would help?

Building a "single page" site with animation between pages

I would love to know what is used to have an effect such as this website template: http://www.templatemonster.com/demo/43491.html
I would like to have a single menu and background while once I click on the menu link it triggers the new page to slide into view without being redirected to a new page causing the browser to reload the new page, etc. Something smooth and nice.
I'm not looking for code (other than the functions to use (if JQuery)) and what effects should I be looking for to make this possible?
Just point me in the right direction :)
There are many ways to achieve what you wish, but this is my suggestion on how to go about it conceptually:
Animate the content by animating the position of your content container, that should give a nice smooth feeling to your page. The jQuery documentation should be pretty clear on that. Remember that you want to intercept the normal behaviour of the anchor, so either preventDefault() or return false, or both.
Get your content using an AJAX request. You can use the href attribute that you put in your link in order to fetch the correct content. Then bind an event to that <a> element with a the .on() method. The reason why you leave the href is to have a graceful fallback: should something go wrong with the code, should the user have javascript disabled, or simply navigating on a non-javascript friendly browser, he will still be able to access your content.
These are the two essential steps to achieve what you are looking for. If you want to fine tune your site a bit more, try to think about those things as well:
Make your website look more responsive by the cautious use of loading .gifs.
Don't double serve content: check whether the user is clicking to the link of the currently displaying page and don't fetch the content again; besides looking silly to your user, it will make a useless server load (probably insignificant, but still). Always consider your user, though! Tell him that that link is disabled by clever use of UI.
Manipulate browser history: using the history API. Your site will be more accessible, more user-friendly, more SEO-friendly, and will also look much more advanced.
now there can be tons of ways .. the easy way (but it's not much of a maintainable way )
is to all your website content in one page and wrap every section that you consider a page in a div like so
<div class="home-page">content of home page goes here </div>
<div class="contact-us-page">content of contact us page goes here </div>
etc...
and with jquery hide them all except the home page
$(function(){
$('.contact-us-page').hide();
$('.other-page').hide();
})
and when the user clicks on the link to other page let's say the contact us page you will hide the parent and slide the contact us page instead
$('.contact-us-link').click(function(){
$('.home-page').hide(1000);
$('.contact-us-page').show(1000);
})
and thats it :)
the down fall of this is that there will be no routing ..
so to solve this you have to use something like backbone.js
which takes a while to know it well ...
this is just a quick idea on how this works ..

How can I create a pop up like the one Google Calendar uses ?

when you click on an empty space in Google Calender in order to add an event or when you click in an already placed event you will get a very nice popup having info about the event (please see attached image).
How can I create a similar pop up windows using CSS and Javascript (I prefer jQuery). I am also using Bootstrap if that helps.
Please notice that the popup position depends on where I will click so let's say that I have an html table and depending on which I will click the popup will be generated near to this position and will point to that specific .
Also notice the close behaviour (close button and if I click out of the popup it will close).
If there are more than one good answers I will accept the simplest one that works with jQuery (and jQuery UI) and Bootstrap - I'd grateful if not other frameworks were used.
Thanks !
There is a plugin called jquery tip-tip which might do what you are after. You essentially want to display some HTML above the area you have clicked. Tip-tip can display html as a 'bubble' above the point you have clicked. It's also easy to style. It is mainly used for tooltips but I see no reason why it can't be adapted to do this.
http://code.drewwilson.com/entry/tiptip-jquery-plugin
(p.s. you would need to use the 'content' property to set the content)
"content: string (false by default) - HTML or String to use as the content for TipTip.
Will overwrite content from any HTML attribute."
I assume that you are talking regarding the tooltips here is link which will help you
http://jquerytools.org/demos/tooltip/index.html
http://coding.smashingmagazine.com/2007/06/12/tooltips-scripts-ajax-javascript-css-dhtml/
http://craigsworks.com/projects/qtip/
http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/
The other answers contained links about tooltips. However, I believe that a dialog component like the jQuery UI dialog would match your requirements better.
Perhaps this did not exist back in March when this question was asked, but current version of Bootstrap has popovers like the one in the question. See:
http://twitter.github.com/bootstrap/javascript.html#popovers
You can use FireBug to analyse the page and check the actual values for CSS properties (ie. what colour is the border, or how much padding is there).

css3 animation on click

The following zip contains the website html and required files: http://dl.getdropbox.com/u/4281191/login.zip
When you hover the html (html:hover) you see a animation that transforms the container into a loginbox, I want that to happen when I click on "Login" at the "Hello, Guest" menu instead.
Anyway to get this done? I'm new to js...
Additional info:
the css is inside the html,
and the css3 animation gets triggered by:
html:hover id/class {
property: value;
}
Thanks for any help!
And I can't vote at comments since I don't have enough reputation...but I could do some free design work for the person who helps me ^^
I still don't know much about animations, but for what matters here, you could use something like the .classname:active or .classname:focus selectors. But as soon as you click something inside it (e.g. a text box), the style will disappear.
So, for this, it really depends. Do you just want a menu that has links that take the user to another page (for this case, you'll be fine) or do you want a login form (for this case, forget it, use jquery)?
For today and future reference, save this link because it'll be your best friend:
http://www.w3.org/TR/selectors/#selectors
Update
Yes, I hovered but I didn't look at the code. I looked now and, unfortunately, the answer is no. You can't affect some upper level object like that using CSS.
For that use jQuery. The simpler way would be use jQuery to add a class to the element you want to change (like $("#the-object-id").addClass('class-name')). To keep the effect add the duration argument. Read this page about Adding a class using jQuery.

Categories