I'm using a sprite image to change the background on hover and click (the .keepImage class is for the click). It all works, but when the background picture changes it scrolls over to the correct position. Is there a way to do it without the scrolling motion?
JS:
<script>
$(document).ready(function(){
$("a.doing").click(function() {
$(this).siblings(".keepImage").removeClass("keepImage");
$(this).addClass("keepImage");
});
});
</script>
CSS:
a.doing {
width: 229px;
height: 202px;
margin-right: 8px;
background: url(http://localhost:8000/img/manifesto/spr_doing.png) 0 0;
}
a.doing:hover, a.doing.keepImage {
background: url(http://localhost:8000/img/manifesto/spr_doing.png) -229px 0;
}
I think, somewhere in your css you have the transition property specified. Usually when you have a transition property specified like this: "transition: all 500ms ease;", the background position will change with a scrolling effect. If you want to prevent this scrolling from happening, then you can either remove the transition property completely, or you can use transition only for the properties you want to animate like - border, color etc.. but not background. If you can somehow provide a link to your page, or give the html mark up and css, it will help. Thanks.
Related
My jqplot graphs have, sometimes, long texts as tick text.
I'd like to ask if is any way to short that text (using jqplot) and to add a tool tip with full text on the tick label?
I hope this will help someone looking for the same solution, Originally answered by me here.
The hover is not detecting because of the z-index of the canvas which lies on top of the whole chart. I did the following and now it's shorten the tootip by CSS ellipsis and show the tooltip with full name on hover.
Based on the Gyandeep's answer, the exact JS and CSS I used are,
Javascript:
$('div.jqplot-xaxis-tick').each(function (i, obj) {
$(this).prop('title', ($(this).text()));
$(this).css('z-index', 999); // this is important otherwise mouseover won't trigger.
});
CSS:
.jqplot-xaxis .jqplot-xaxis-tick {
position: absolute;
white-space: pre;
max-width: 92px; // Change it according to your need
overflow: hidden;
text-overflow: ellipsis;
}
The JavaScript part needs to be executed after every rendering of chart. It's better to put them right after plotting the chart and may in the AJAX success handler.
I am currently using nvd3 for charting in my application. I have a problem in that if the div is hidden via display:none before the charts are rendered, the charts will throw an error, and upon "un-hiding" the div, I have to click on the charts to get them to render correctly. Is there any way to pre-render the charts even if the div is hidden? I have tried setting the width and height of the parent svg before calling the chart, but to no avail.
nv.addGraph(function () {
//chart setup code
d3.select("#chart svg").attr("width", 300).attr("height", 500);
d3.select("#chart svg").datum(data).transition().duration(500).call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
I figured out how to make a previously hidden chart render properly without needing to statically define the dimensions of the chart area:
NVD3 Charts not rendering correctly in hidden tab
This solution also depends on using JS to display the hidden content and at the same time trigger a resize event which forces NVD3 to resize the now visible chart to fill parent. In my case I didn't care about SEO so I used display:none; but visibility:hidden; would work too.
Just add this JavaScript:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
window.dispatchEvent(new Event('resize'));
})
hidden.bs.tab is the event that fires after a new tab is shown as per the Bootstrap docs. This code fires a resize event after each tab change.
You can hide a chart – but still render the graph – using a class like this:
.out-of-sight-and-space{
visibility: hidden !important;
position: absolute !important;
top: 0 !important;
}
You should apply this to the parent of the svg, in your case #chart. When you want to show the chart, remove the class.
I'm currently working on a website that is relatively equal for all devices; desktop & mobile. I'm working with % as I think that is the best option.
It's based on portrait mode. If you change the device to landscape, the whole website looks like a fat midget.
So I'm wondering: Is there a possibility to lock a website, displaying it in portrait all the time?
And by that, I mean: Device rotation locked. Not that when going to landscape, the website returns back to portrait, while in landscape. (which I already saw some code on StackOverflow.)
Check my site at: http://prototyping.iscs.nl/mobiel.html
for reference :)
Thanks in advance
In an update to an old ('12) question, I think this can help a lot of people!
I haven't figured out a true way of locking the device rotation, but came up with a perfect alternative, which I've seen a few people do too.
Option A. One simple alert
By use of a simple jQuery script, you can detect the orientation of your device.
if(window.innerHeight > window.innerWidth){
alert("Please use Landscape!");
}
Well, a simple alert is easy, but the notification can be quite nicer!
Option B. One nice image notification
(update as of 04-2018: (as I just saw my post again, I thought of something easier..) use media queries. Pretty much the same as below, but instead of using Javascript, use css, hide the element by default and show it when the orientation is landscape → #media (orientation: landscape) {...})
Simply add an fixed element to your page that is shown when the orientation has changed.
HTML
<div class="turnDeviceNotification"></div>
CSS
.turnDeviceNotification {
position:fixed;
top: 0;
left:0;
height:100%;
width:100%;
display: none;
}
You can update this element with text, or simply connect it to a background-image by
.turnDeviceNotification {
background-image:url('../images/turnDevice.jpg');
background-size:cover;
}
Simply add a nice background to your images folder, such as the one below.
Noticed the object has an display: none ? That's because else it'd be shown even in portrait mode. Now, all you need to do is to use the script below, so the object is shown only in landscape mode.
jQuery(window).bind('orientationchange', function(e) {
switch ( window.orientation ) {
case 0:
$('.turnDeviceNotification').css('display', 'none');
// The device is in portrait mode now
break;
case 180:
$('.turnDeviceNotification').css('display', 'none');
// The device is in portrait mode now
break;
case 90:
// The device is in landscape now
$('.turnDeviceNotification').css('display', 'block');
break;
case -90:
// The device is in landscape now
$('.turnDeviceNotification').css('display', 'block');
break;
}
});
This will show the notification only when the device orientation has changed to landscape.
Not possible. Lock rotation is a device setting: http://support.apple.com/kb/HT4085
When not locked by device, the browser will rotate and since your content is inside the browser, the content will rotate too.
Maybe the viewport will help in solving your problem: < meta name="viewport" content="width = device-width"/>". I see you're missing that meta tag.
I don't think is possible but there are couple of ways to work around
js way: window.DeviceOrientationEvent
css way
#media (orientation: landscape) {
body { background-color: black; }
}
#media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
html {
transform: rotate(-90deg);
transform-origin: left top;
width: 100vh;
overflow-x: hidden;
position: absolute;
top: 100%;
left: 0;
}
}
Source : https://css-tricks.com/snippets/css/orientation-lock/
Not possible as of now. But the other way around would be,
Using CSS,
Media query helped work properly for a landscape view.
min-aspect-ratio: 13/9 is very important as if you don't specify this, for some mobile devices, if you focus on a form field, the keyboard is opened, which basically changed the viewport's height which basically triggers the landscape media query. Hence min-aspect-ratio is very important for landscape media query.
#media only screen and (min-width: 320px) and (max-width: 1023px) and (min-aspect-ratio: 13/9) and (orientation: landscape) {
// Landscape view properties
}
Using JavaScript, we can use screen.availHeight as screen height doesn't change when keyboard displays. Also have to add more checks to allow Desktop view for following.
var currentOrientation = function() {
if(screen.availHeight < screen.availWidth){
// Landscape view
} else {
// Portrait view
}
}
// Set orientation on initiliasation
currentOrientation();
// Reset orientation each time window is resized. Keyboard opening, or change in orientation triggers this.
window.addEventListener('resize', currentOrientation);
For layout purposes I need to place 15px space between the bottom of the scrolled contents and the bottom of the container: div class="scroll-pane".
Styling the container .scroll-pane { padding-bottom:15px; } has no influence on the output. Going into the code of plugin jScrollPane(), it is set: elem.css({'padding':0}); so the padding-value is reset.
Is there any way to set a paddingBottom value for the scrolling container?
A css rule should work too!
.scroll-pane {
padding-bottom:15px!important;
}
In jQuery
$('.scroll-pane').parent().css('padding-bottom', '15px');
Should do the trick
I'm currently using jQuery Waypoints to highlight nav items as you scroll through sections of the page. All of that works fine; thanks to copying the code from the demo at http://imakewebthings.github.com/jquery-waypoints/.
My demo is: http://www.pandlmedia.com/index.php/index_new
However, I also want to create a waypoint at the #footer div which would trigger an event to change the color of all of the nav links.
$('#footer').bind('waypoint.reached', function(event, direction) {
$('.nav ul a').addClass('white');
});
This doesn't work, as there's nothing telling it to change back once it exits the #footer div. I'm not very experienced in writing jQuery or using this plug-in for that matter. What do I need to add to make this work? Is the fact that there are two levels of waypoints also causing problems?
well, looking closer at the "sticky elements" demo, I was able to modify the example of the disappearing '.top' button to make this work for my own needs described above:
<script type="text/javascript">
$(document).ready(function() {
$('.container .nav ul a').addClass('black');
$.waypoints.settings.scrollThrottle = 30;
$('#footer').waypoint(function(event, direction) {
$('.container .nav ul a').toggleClass('black', direction === "up");
}, {
offset: '50%'
});
});
The key was to add the .black class below the .white class in my css so that it overrides the color parameter properly.