I am a complete novice with JQuery!
So here is my fiddle:
http://jsfiddle.net/hYEzV/977/
Fullscreen:
http://fiddle.jshell.net/hYEzV/977/show/
I've add the plug-in in the external resources panel.
My div that I want to attach the scroll to has the id of "sc" and it is wrapped inside a div with the id of "AboutMe"
My JQuery code is located right at the bottom of the JS panel and is this:
$('#sc').slimScroll({
position: 'right',
height: '100%',
color: '#ffffff',
railVisible: true,
alwaysVisible: true
});
For some reason it isn't scrolling the div I can see the scroll bar to the right that is coming up but it can't be dragged nor is it changing color to white....
I can't see a problem with it so any help I would love
and thank you in advance for solving if you can!
Solved forgot to add JQuery UI in resources.
Related
I am now facing the problem with bootstrap popover position. I am using popover to show the list of images that user has chosen and allowing user to review and remove images inside the popover.
My problem is, after user has removed the image from the popover, the height of the popover was changed and the whole popover shifted to top. The arrow icon also shifted.
I can reposition the popover by initializing it but I don't think it is a good way to do as it cause the flickering while reloading content.
I had created a fiddle for you to see my problem.
In my fiddle, uncomment the code inside removeImage function to see repositioning with flickering.
Please advice,
Thanks in advanced
Add animation: false to the initializer and uncomment the code you have and it works cleanly.
$('#aPopover').popover({
title: 'Selected Images',
html: true,
content: getSelectedImages,
placement: 'right',
animation: false
});
I am trying to create a modal window with windowManager.open({...}) that will have a (probably long) list of items. Only way to ensure that it will display properly is to set fixed height to modal and make it's content scrollable.
Documentation on windowManager.open isn't really helping me here. I was able to find some examples describing scrollbars option:
editor.windowManager.open({
scrollbars: true,
height: 300,
...
});
But it is not working for me. If only someone could give me a hint on this, maybe I need to use some kind of Panel for my modal's body?
I will really appreciate if someone could update my Fiddle.
Hah, I've spent all of yesterday trying to figure this out but as soon I've posted my question I've found the answer myself.
I was trying to repaint the dialog after setting overflow: auto manually by calling win._bindings.repaint[0]() and it gave me an error:
Cannot read property 'autoScroll' of undefined
And it turned out that autoScroll is what I was looking for:
editor.windowManager.open({
autoScroll: true,
height: 300,
...
});
I"m making a script for a portfolio. when you click on one of the portfolio items a div will appear with the jquery onclick function like this:
$('#portfolioItem').click(function() {
$('#divThatWillApear').show();
This all works fine. I also downloaded a slider called glide.js. this slider also work fine.
But as soon as I combine my script and the slider togheter the slider is acting wierd.
I've created a jsfiddle : http://jsfiddle.net/skunheal/fzftX/2/
the slides dont scale to the full width of the slider. but when you rescale the window they do. when I remove the display none from my parent element (portfolioOverlay) it suddenly works all fine...
any one has an idea whats going wrong and how to fix it?
Hope to hear from anyone!
An easy fix would be to initialize the slider after clicking show, to fix this problem.
$('#show').click(function () {
$('#portfolioOverlay').show();
$('.slider').glide();
});
Demo Fiddle
Your .slider width is messing up as the width of the display:none; parent.
I "fixed" it by adding to your .slider
width: 100%;
to
width: 500px; // same as parent element, this means you are joining the width to the width of the parent however
Updated jsFiddle:
http://jsfiddle.net/cB3Pn/
As the portfolioItem is display:none on load it's size/position can not be calculated by your code. Removing the display:none CSS and adding the following to the bottom of your JavaScript will fix this as it will hide the portfolioItem once the JavaScript has run.
$('#portfolioOverlay').hide();
You could trigger the resize event yourself after showing the slider:
$('#show').click(function() {
$('#portfolioOverlay').show();
$(window).resize();
});
Have a tooltip issue here. Hope somebody could help tweak the code a little bit.
I'm using the jQuery Tools for implementing a tooltip. I need tooltips to open from separate div where I can use any html code. So far I have just one tooltip to open:
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<script>
$(document).ready(function() {
$("#download_now").tooltip({
offset: [5, 0],
effect: 'slide'
}).dynamic({ bottom: { direction: 'down', bounce: true } });
});
</script>
And it works fine except I need more tooltips added.
Could anybody help modifying the script so more tooltips could be added by their id?
Here is the JSFiddle with one tooltip (working)
Here is the JSFiddle with more tooltips (not working)
I'm sure there should be an easy fix. I'm just not a javascript specialist.
Thanks!
Ok i got it. I apologize, I thought you were using jquery-ui tooltip (which provide - according to me - better widgets than the lib you are using).
By reading the documentation i found that :
After this the element next to the trigger is being used as the tooltip
meaning that your tooltip contents (with html as you specified) need to be placed after the element on which you want a tootip, like this :
Lorem ipsum
<a id="download_now1" class="need_tooltip">
<strong>dolor sit amet</strong>
</a>
<div class="tooltip">
<p><strong>Some sample text</strong> with html within...</p>
</div>
Have a look in this jsFiddle.
If you can't put your tooltips contents directly after your elements i would suggest you to use jquery-ui which is more flexible to define tooltips contents.
EDIT to provide a jquery-ui version
jquery-ui tooltips basically closes when element looses focus, so you can't hover the tooltip (to click on a link inside for example). But there is a workaround to prevent tooltip from closing for such case :). Thus i think this new jsFiddle is filling your requirements.
I am using jQuery UI or more specific the draggable feature. Is it possible to trigger drag() and tell the element to move/drag somewhere without doing it yourself?
Something like el.dragTo(position).
Thanks in advance!
EDIT: I am kinda using the draggable function as a resizer. I have a 1px thin div between two other divs. When i drag the div in either direction i resize the other two divs depending on the amount i dragged the drag-div.
Use jQuery animate()
$(element).animate({
top: '10px',
left: '30px'
});
Demo: http://jsfiddle.net/maniator/BXVx2/