I have a link at the top of my site, that link to an object in the middle of my site. I have made a anchor link, so the user don´t need to scroll.
But I was wondering if I could make a slide/scroll effect, so when they click on the link, it scroll "slowly" to the object.
You can find the answer here: http://css-tricks.com/snippets/jquery/smooth-scrolling/
Essentially you need to link your javascript:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Then add your script code:
<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>
Related
I'm looking for alternatives for the plug In values in legend.
The plug in uses jQuery and I'm running a Angular 5 application.
Has someone created a solution for that before?
labelFormat: '<span style="color:{color}">{name}</span>: <b>{point.y:.2f} USD</b> ({point.change:.2f}%)<br/>'
Here is a sample of Hicharts using jQuery to access the chart container and display the series value on legend.
To get rid of jquery you can replace jquery .bind method with js addEventListener on chart.container. Next, follow highcharts-angular documentation and create your own wrapper for this plugin. Check demo posted below.
Value-in-legend.js plugin:
(function(factory) {
if (typeof module === "object" && module.exports) {
module.exports = factory;
} else {
factory(Highcharts);
}
})(function(Highcharts) {
Highcharts.Series.prototype.point = {}; // The active point
Highcharts.Chart.prototype.callbacks.push(function(chart) {
chart.container.addEventListener("mousemove", function() {
var legendOptions = chart.legend.options,
hoverPoints = chart.hoverPoints;
// Return when legend is disabled (#4)
if (legendOptions.enabled === false) {
return;
}
if (!hoverPoints && chart.hoverPoint) {
hoverPoints = [chart.hoverPoint];
}
if (hoverPoints) {
Highcharts.each(hoverPoints, function(point) {
point.series.point = point;
});
Highcharts.each(chart.legend.allItems, function(item) {
item.legendItem.attr({
text: legendOptions.labelFormat
? Highcharts.format(legendOptions.labelFormat, item)
: legendOptions.labelFormatter.call(item)
});
});
chart.legend.render();
}
});
});
// Hide the tooltip but allow the crosshair
Highcharts.Tooltip.prototype.defaultFormatter = function() {
return false;
};
});
Next, initialize it in your component:
require("./path-to-your-file/value-in-legend")(Highcharts);
Demo:
https://codesandbox.io/s/j2j7wxwv7y
I have deployed my app on Azure, I have a C# backend and AngularJS front end.
I am using a custom directive (called bgSrc) which sets the image source based on the given url (either a background-image or a src) depending on which element the directive is used.
Here is the directive:
app.directive('bgSrc', ['preloadService', function (preloadService) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.hide();
preloadService(attrs.bgSrc).then(function (url) {
if (element[0].tagName === 'DIV' || element[0].tagName === 'MD-CONTENT' || element[0].tagName === 'MAIN' || element[0].tagName === 'FORM') {
element.css({
"background-image": "url('" + url + "')"
});
element.fadeIn();
}
else if (element[0].tagName === 'IMG') {
attrs.$set('src', url);
element.css({
'display': 'block'
});
element.fadeIn();
}
});
}
};
}]);
Here is my preloadService:
app.factory('preloadService', ['$q', '$rootScope', function ($q, $rootScope) {
return function preload(url) {
var deffered = $q.defer(),
image = new Image();
image.src = url;
if (image.complete) {
deffered.resolve(image.src);
$rootScope.loading = false;
} else {
$rootScope.loading = true;
image.addEventListener('load', function () {
deffered.resolve(image.src);
$rootScope.loading = false;
});
image.addEventListener('error', function () {
deffered.reject();
$rootScope.loading = true;
});
}
return deffered.promise;
};
}]);
Here is an example of how I use it on html.
<div ng-if="!loading" bg-src="assets/build/img/ocean_bg.png">
<form name="model.form" ng-submit="login()" bg-src="assets/build/img/scroll.png">
<h1>Log In</h1>
...
</form>
</div>
It works perfectly well on Chrome and Android but keeps failing on iOS devices. I have pinpointed the issue to be my custom directive, if I remove it the page loads fine, if I include it the page is caught in an endless loop not loading my images and stick in the "$rootScope.loading" state which simply displays a circular progress bar.
Any help on the matter is much appreciated
The issue was in my preloadeService, where the loading of the image was stuck in an infinite loop.
JQueryMobile 1.4 has deprecated the pageshow event and instead recommends using pagecontainershow; however, while I'm able to get the pagecontainershow event at a document level, I can't bind a function to a particular page.
<div id="page1" data-role="page">
...
<script>
$( "#page1" ).on( "pagecontainershow", function( event, ui ) {
console.log("page1 pagecontainershow");
} );
</script>
</div>
Demonstration: http://jsbin.com/IFolanOW/22/edit?html,console,output
I also considered using the alternative form of the jQuery "on" function where we use a selector, but that would need to be a parent of the page div, and that might include other pages, so that doesn't work.
As a workaround, I've done this, but it is very inefficient:
function registerOnPageShow(pageId, func) {
var strippedPageId = pageId.replace("#", "");
var e = "pagecontainershow." + strippedPageId;
// TODO why isn't it working to use $(pageId) instead of $(document)?
$( document ).off(e).on(e, null, {page: strippedPageId, f: func}, function(e, ui) {
if ($(":mobile-pagecontainer").pagecontainer("getActivePage")[0].id == e.data.page) {
e.data.f(e, ui);
}
});
}
You can get the page ID like this.
$(document).on('pagecontainershow', function(e, ui) {
var pageId = $('body').pagecontainer('getActivePage').prop('id');
});
There is currently no way to have a show/hide event on a specific page.
Here is what I'm using (jqmobile >1.4):
$(document).on("pagecontainershow", function () {
var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
var activePageId = activePage[0].id;
switch (activePageId) {
case 'loginPage':
...
break;
case 'homePage':
...
break;
case 'groupPage':
...
break;
default:
}
});
$(document).on("pagecontainershow", function(event, ui) {
var pageId = $('body').pagecontainer('getActivePage').prop('id'),
showFunc = pageId+'_show';
if (typeof MobileSite[showFunc] == 'function') {
MobileSite[showFunc]();
}
});
MobileSite is contained in an external .js file with all the show() functions.
$(document).on("pagecontainerbeforeshow", function (event, ui) {
if (typeof ui.toPage == "object") {
var crrentPage = ui.toPage.attr("id")
}
});
and you must use this code before calling Index.js !!
I have an overlay on my page and I would like to give user a link / URL which leads them directly to the page, with the overlay loaded.
Is it possible to be done? How do I do that?
This is my code:
$(function() {
$('#overlay_job').click(function() {
document.getElementById('iframe_job').src = "http://targeturl-for-my-overlay-content";
$('#overlay_bg2').fadeIn('fast',function(){
$('#overlay_box').fadeIn('fast');
});
});
$('#boxclose').click(function() {
$('#overlay_box').fadeOut('fast',function() {
$('#overlay_bg2').fadeOut('fast');
});
});
var overlay_bg2 = $("#overlay_box");
//var top = $(window).scrollTop() - (overlay_bg2.outerHeight() / 2);
var top=0;
var left = -(overlay_bg2.outerWidth() / 2);
overlay_bg2.css({ 'margin-top': top,'margin-left': left });
if(getUrlVars()["openJobOverLay"] == "Y") {
$('#overlay_job').trigger('click');
}
});
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,
function(m,key,value) {
vars[key] = value;
});
return vars;
}
===========
and on the page, user can click on this link to get the overlay shown:
<a id="overlay_job" class="underline" href="javascript:void(0);%20opener.jobframe.location.reload();">
See job openings
</a>
<img src="link_arrow.gif" class="linkarrow">
</div>
Hide the overlay with CSS: display: none;. Give the overlay element an id, then add the id to the URL like so http://www.yourpage.com#id. Then use jQuery to do something like this:
$(document).ready(function(){
if(window.location.hash) $('#' + window.location.hash).show();
});
Edit:
In your specific case add this line as the last line inside your $(document.ready();.
$(function() {
// All of your code inside this function...
if(window.location.hash) $('#' + window.location.hash).click();
});
function getUrlVars() {
// Some more of your code...
jQuery UI has some nice convenient CSS styles for alerting and highlighting. I can see it at the themeroller site -- look on the right hand side. Is there a Javascript interface to these styles? Do we use hard-coded CSS? Where is this documented?
Is there method list, a cheatsheat, or anything other than the interactive docs on jQuery UI?
Apply the appropriate CSS classes for the desired interaction cue from the UI/Theming/API page: .ui-state-highlight for highlight and .ui-state-error for error. You can do it statically or use .addClass('ui-state-highlight') or .addClass('ui-state-error') to do it dynamically.
I have adapted a short jQuery function to convert a given set of divs (containing text) into error/highlight elements.
You can see it in action on this jsFiddle.
Here is the javascript:
//function to create error and alert dialogs
function errorHighlight(e, type, icon) {
if (!icon) {
if (type === 'highlight') {
icon = 'ui-icon-info';
} else {
icon = 'ui-icon-alert';
}
}
return e.each(function() {
$(this).addClass('ui-widget');
var alertHtml = '<div class="ui-state-' + type + ' ui-corner-all" style="padding:0 .7em;">';
alertHtml += '<p>';
alertHtml += '<span class="ui-icon ' + icon + '" style="float:left;margin-right: .3em;"></span>';
alertHtml += $(this).text();
alertHtml += '</p>';
alertHtml += '</div>';
$(this).html(alertHtml);
});
}
//error dialog
(function($) {
$.fn.error = function() {
errorHighlight(this, 'error');
};
})(jQuery);
//highlight (alert) dialog
(function($) {
$.fn.highlight = function() {
errorHighlight(this, 'highlight');
};
})(jQuery);
They are just CSS styles. You can apply them on the backend, or apply them using .addClass().
I'd like to share one more solution. It's based on custom widgets and allows to add a title and customizable icon. Try Fiddle or look below:
$.widget('custom.noteBox', {
options: {
icon: true,
state: 'highlight'
},
_create: function () {
var icon, note = $('<p>').html(this.element.html());
if (this.options.icon === true) {
switch (this.options.state) {
case 'highlight':
icon = 'info';
break;
case 'error':
icon = 'alert';
break;
default:
icon = false;
}
} else {
icon = this.options.icon;
}
if (icon) note.prepend($('<span>')
.addClass('ui-icon ui-icon-' + icon)
.css({
'float': 'left',
'margin-right': '.3em'
}));
var title = this.element.attr('title');
if (title) note.prepend($('<strong>').text(title + ' '));
this.element.addClass('ui-widget')
.replaceWith($('<div>')
.addClass('ui-state-' + this.options.state + ' ui-corner-all')
.css({
'margin-top': '20px',
'padding': '0 .7em'
})
.append(note));
}
});
$('.error').noteBox({
state: 'error'
});
$('.info').noteBox();
$('<div title="Note! ">I`m dynamically added #1</div>')
.appendTo('body').noteBox({
icon: 'folder-open'
});
$('<div title="Note! ">I`m dynamically added #2</div>')
.appendTo('body').noteBox({
state: 'error'
});
$('<div title="Note! ">I`m dynamically added #3</div>')
.appendTo('body').noteBox({
state: 'error',
icon: 'trash'
});