Okay, so I need to change images on hover in my Angular app. However, due to some peculiarities of the site, it wasn't really feasible to change images on hover via css [without a ton of extra work], which would have been the best way, I realize.
So instead, I'm using ng-mouseenter and ng-mouseleave to change the images on hover.
landing.jade
img.share-button(src='images/btn_share.png', ng-click='dropdownShareIcons()')
img.share-icon-top(src='{{ shareIcons[0].orig }}', data-id='0', ng-mouseenter='colorizeIcons($event)', ng-mouseleave='decolorizeIcons($event)')
img.share-icon-top(src='{{ shareIcons[1].orig }}', data-id='1', ng-mouseenter='colorizeIcons($event)', ng-mouseleave='decolorizeIcons($event)')
img.share-icon-top(src='{{ shareIcons[2].orig }}', data-id='2', ng-mouseenter='colorizeIcons($event)', ng-mouseleave='decolorizeIcons($event)')
Then in the controller I have an object which contains the paths to the images, and the functions which switch images on hover.
landing.js
$scope.shareIcons = [
{orig: 'images/follow_weibo_grey.png', hover: 'images/follow_weibo_colored.png'},
{orig: 'images/follow_wechat_grey.png', hover: 'images/follow_wechat_colored.png'},
{orig: 'images/follow_youku_grey.png', hover: 'images/follow_youku_colored.png'},
]
$scope.colorizeIcons = function($event) {
$event.target.src = $scope.shareIcons[$event.target.dataset.id].hover;
}
$scope.decolorizeIcons = function($event) {
$event.target.src = $scope.shareIcons[$event.target.dataset.id].orig;
}
This all works fine and well on my local environment, but on the production server it is veeeerrrrry slow. Like, 2-3 seconds to switch the images.
So my question is - is there an easy way to fix this? Either something within angular or a workaround/hack. Doesnt really matter as long as image switch time is sped up a bit. Or is it going to continue to be slow as long as I'm switching images via JS like this? Ideally, I would like avoid rewriting this using CSS.
Thanks in advance.
Hey bro I had the same problem, and all I could think of doing was preloading the images. That helped alot. Add a small piece of js code which loads asynchronously at the beginning of your document. Like this for example:
var images = new Array()
function preload() {
for (i = 0; i < preload.arguments.length; i++) {
images[i] = new Image()
images[i].src = preload.arguments[i]
}
}
preload(
// for (i = 0; i < $scope.members.length; i ++){
// return members[i].source + ",";
// }
"http://ramiawar.co/pages/speakersPage/pages/team/assets/images/image1.1.jpg",
"http://ramiawar.co/pages/speakersPage/pages/team/assets/images/image2.1.jpg",
"http://ramiawar.co/pages/speakersPage/pages/team/assets/images/image3.1.jpg",
"http://ramiawar.co/pages/speakersPage/pages/team/assets/images/image4.1.jpg",
"http://ramiawar.co/pages/speakersPage/pages/team/assets/images/image5.1.jpg",
"http://ramiawar.co/pages/speakersPage/pages/team/assets/images/image6.1.jpg"
)
I would consider optimizing the PNG image sizes. There are batch optimization tools available online, here is a blog post comparing a few of them to get you started: http://www.sitepoint.com/image-compression-tools/ perhaps you can test optimize a couple of images to see if you notice a change?
GL!
Related
I'm hoping someone can help a javascript noob with a caching problem. I'm making a site in Wordpress and I've got a caching plugin installed. I need one div (that's on the sidebar of every page) NOT to be cached as it contains an image and text that is randomly generated on each page load. I've done a lot of reading and testing out of various online solutions, but I can't get one to work. I read that the best way to get around this is to give the div a random ID via Date.now(), but I can't get that to work either. So I found something close, yet it, too, doesn't work (posted below). The div doesn't show on screen, yet its contents show up fine in my source code.
Can anyone fix it for me or suggest something? I am a complete noob when it comes to javascript. Thank you for reading! :)
<script type='text/javascript'>
function randomString(length) {
var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz'.split('');
if (! length) {
length = Math.floor(Math.random() * chars.length);
}
var str = '';
for (var i = 0; i < length; i++) {
str += chars[Math.floor(Math.random() * chars.length)];
}
return str;
}
var randomId = "x" + randomString(8);
document.write('<div id="' + randomId + '">[autonav display="images,title, page, excerpt" pics_only="0" postid="11" attachment="1" orderby="rand" count=1]</div>');
</script>
When I use image markdown like , for some images Jekyll is adding class="full-img", making the image larger than it should be.
I observe the same behavior with both redcarpet and kramdown.
Why is that happening / how do I stop it?
I have the similar issue.
In my case I use theme kasper .
I found that class full-img was not added by markdown engine, but the JavaScript code that author wrote in the assets/js/index.js file.
There's a function saying
function updateImageWidth() {
var $this = $(this),
contentWidth = $postContent.outerWidth(), // Width of the content
imageWidth = this.naturalWidth; // Original image resolution
if (imageWidth >= contentWidth) {
$this.addClass('full-img');
} else {
$this.removeClass('full-img');
}
}
After commenting every picture works fine as the original class.
That's my case.
Hopes that works for you.
how to remove the dots from p:lineChart and draw the chart as just the continuous line?
Thanks
For others with similar problem, I did:
<p:chart type="line" model="#{myController.model}"/>
and:
LineChartSeries serie = new LineChartSeries();
serie.setShowMarker(false);
and worked fine. I'm using PrimeFaces 5.1.
There is a showMarkers attribute that isn't working for me (I'm using PrimeFaces 3.4.2) but I found a way to hide them.
It's a bit hacky, I made it working on the showcase, you just need to replace widget_category by the widget of your chart. You can even test it online from the showcase using a javascript console if your web browser allows it (tested under chromium) :
// loop through the series
for (var i = 0; i < widget_category.cfg.series.length; ++i) {
// Hide markers
widget_category.cfg.series[i].showMarker = false;
// I'm not sure you want this when talking about 'continuous line'
// but you can make your chart smooth this way :
widget_category.cfg.series[i].rendererOptions = { smooth: true };
}
// Ask a refresh using the modified configuration object
widget_category.refresh(widget_category.cfg);
Anyone knows how to get the variant tabs to work as actual tabs and not as a drop down?
This is how sr.wikipedia.org has it:
and this is how I have it on my zablude.com/wiki/ page:
and I've tried everything I found and searched everywhere I could think of but I wasn't able to find a solution... anyone has any ideas how this works?
They hack it in JavaScript — see this piece of code at the bottom of Медијавики:Vector.js:
//to be able to switch the language variant (overrides the default buttons with more visible ones)
function tabWorkaround() {
if(mw.config.get('wgUserVariant') == 'sr') {
var tab_urls = {};
tab_urls[0] = document.getElementById('ca-varlang-0').getElementsByTagName('a')[0].href; //Ћирилица
tab_urls[1] = document.getElementById('ca-varlang-1').getElementsByTagName('a')[0].href; //Latinica
$('#p-variants').remove();
mw.util.addPortletLink('p-namespaces', tab_urls[0], 'Ћирилица');
mw.util.addPortletLink('p-namespaces', tab_urls[1], 'Latinica');
}
}
$(document).ready(tabWorkaround);
It would probably be cleaner to do it with a MediaWiki hook, though. The following code is untested, but should work if I haven't made any silly mistakes:
// show language variants as tabs in Vector skin
function tabWorkaround( &$skintemplate, &$links ) {
$links['namespaces'] += $links['variants'];
$links['variants'] = array();
return true;
}
$wgHooks['SkinTemplateNavigation::Universal'][] = 'tabWorkaround';
(In MW 1.17, this hook is only called from the Vector skin. In MW 1.18, it will affect all skins. If you don't want that, you could test whether $skintemplate->skinname == 'vector'.)
Try $wgVectorFeatures['collapsibletabs']['global'] = false;. That is intended for the dropdown on the other side, but might work for other dropdowns as well.
I have frames setup on a page, is there a way to force all links in a child frame to open in a new window('blank') rather than 'self'?
I have no access to the page that I have in my frame, sometimes the links open new pages sometimes they just transfer to a totally new page. I want to keep some consistency by making all links open in new pages.
You could use some javascript:
var links = document.getElementsByTagName('a');
for (var i = 0, l = links.length; i < l; ++i) {
links[i].target = '_blank';
}
You'll just have to get a reference to the document in your frame (sorry, it's been a long time since I've worked with frames). From memory it's something easy like frame.document
I'm not positive that you can modify the DOM of external pages, but it's worth a shot.
var links = document.getElementsByTagName('a');
for (var i = 0, l = links.length; i < l; ++i) {
links[i].target = '_blank';
}
This will not work for Frames loaded by Javascript to open in a new Window :(
Don't use frames.
Or load them in using a HTTP object (there's plenty in a lot of server-side languages), modify the links using regular expressions to point to '_blank' instead' and then put them on your page.
Alternatively, you might be able to use the DOM:
nodeLink = document.getElementById("alink");
nodeLink.setAttribute("target", "_blank");
What am I missing when I respond with the following?
If you can't change the page in the frame, you're not going to change its behavior.
Put this between your <head> and </head> tags:
<base target="_blank">
Just replace _blank with whatever target you want to be the base for all links on the page.
Source: http://www.w3schools.com/tags/att_base_target.asp