jQuery UI draggable not dragging for X axis in RTL page - javascript

I am using the following:
jQuery v3.3.1
jQuery UI - v1.12.1 - 2018-10-16
Steps to reproduce the problem:
Have an HTML page with RTL in the html tag on top.
Include Jquery and Jquery ui with css files.
Enable draggable component for a div element on document ready.
$("#element-helper").draggable({
handle: ".handle"
});
<div id="element-helper">
<div class="header">
<i class="icon white note"></i>
<h3 class="handle"> Element Insert</h3>
<a class="close-styler"><i class="icon white delete"></i></a>
</div>
</div>
Do you guys know any solution to this problem? I'v been searching but did not find a solution yet.
When i remove RTL from the html tag, it works fine. But my page and framework is rtl only.

[Solved] I had to keep the element css to left direction for it to work properly even in RTL.
#element-helper {
top: 100px;
left: 100px;
position: fixed;
min-height: 500px;
width: 400px;
font-weight: 300;
}

Related

Force hover state secondary element on click

quick question from a complete JS noobie.
On a site, I have an image of a product consisting of basically two parts, then I have a row of small .png thumbnails .colorthumbnail of those separate parts with transparent backgrounds. In the CSS I set it so that when hovering the thumbnails, it enables the .colorzoom class that overlays a big version of the same color option over the original product picture using position: absolute.
HTML:
<div class="coloroptions">
<div class="j210desertsand">
<div class="colorthumbnail">
<a href="javascript:void(0)" id="colorpicker">
<img src="img/products/colors/j210desertsand.png"></a>
<span class="colorzoom"><img src="img/products/colors/j210desertsand.png">
</span></div></div>
<div class="j210platinum">
<div class="colorthumbnail">
<a href="javascript:void(0)" id="colorpicker">
<img src="img/products/colors/j210platinum.png"></a>
<span class="colorzoom"><img src="img/products/colors/j210platinum.png">
</span></div></div>
</div>
The <div class="j210desertsand">classes are simply there so I can easily hide a single color option using CSS and the next colour will line up. The anchor points are there cause after some research I found I should actually make the thumbnails clickable and with a href="javascript:void(0)" they don't actually link anywhere or reload the page.
CSS: (Excuse the mess, I'm inexperienced)
.coloroptions {
width: 60%;
margin-left: 40%;
}
.colorthumbnail {
margin-left: -45%;
}
.colorthumbnail img {
float: left;
max-width: 16%;
padding-right: 5px;
position: relative;
}
.colorthumbnail .colorzoom {
position: absolute;
width: 253%;
margin-top: 6.9%;
display: none;
margin-left: -3.6%;
}
.colorthumbnail:hover .colorzoom {
display: block;
}
Now this appears to work fine, but because there are two different parts I want to give the user the ability to combine color options and obviously you can't hover over two images at once. After some more research I found that I need Javascript to force the :hover state on click. But I'm gonna be honest, I have no idea what I'm doing. This is what I have:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<!-- -----------------------JSQuery------------------------- -->
<script>
$("#colorpicker").click(function() {
$('.colorthumbnail:hover').toggleClass('colorthumbnail:hover .colorzoom');
});
</script>
<!------------------------ JSQuery End -------------------------->
However this does not appear to be working. Did I get the linked script in the <head> right? It did work alright with the 'Hello World' pop-up test. Did I get the classes in the script right? I'm a little stuck and help would be appreciated! Much love for the community.
Try adding your code like this:
$( document ).ready(function() {
$("#colorpicker").click(function() {
$('.colorthumbnail:hover')
.toggleClass('colorthumbnail:hover.colorzoom');
});
});
When trying to use jquery you need to make sure the page is loaded so it can perform dom manipulation.
source: https://api.jquery.com/ready/
Here is a jsFiddle demo: https://jsfiddle.net/Lv571n1w/
If you inspect element you can see it toggle the classes when clicked.

Text Overlay on Image Hover - Responsive

I am using this tutorial to create an overlay on my images with text:
http://codepen.io/pdelsignore/pen/uqenH
It works great, however I have a responsive website and if I try to enter a % as the width / height of the '.box' the image disappears. It appears it can only be a fixed with (i.e. px) which obviously doesn't scale.
.box {
cursor: pointer;
height: 250px;
position: relative;
overflow: hidden;
width: 400px;
font-family: 'Open Sans', sans-serif;
}
Does anyone have any ideas? Thanks in advance!
Try giving min-width and min-height a try.
min-width: 100%;
min-height: 100%;
In live project usually we use any responsive framework. Like bootstrap or foundation. So I think you could ignore as framework will handle this properly. No need to use any % to make it responsive. For Bootstrap we use
<div class="row">
<div class="col-md-4">
<div class="box">
<img src="http://files.room1design.com/oldcity.jpg"/>
<div class="overbox">
<div class="title overtext">
Walk This Way
</div>
<div class="tagline overtext">
Follow the path of stone, a road towards an ancient past
</div>
</div>
</div> <!-- End box -->
</div> <!-- End Col-4 -->
</div> <!-- End row -->
I believe the dimensions of .box as a percentage would be based on the height of the parent. since no height is specified on the body it has no frame of reference. try adding the following to get percentages working on .box.
html, body {
height:100%;
}
here is an updated codepen with a few other changes to illustrate the use of percentages after giving your body dimension.
http://codepen.io/anon/pen/dPREBE

Issue in displaying div using Colorbox

Good Day Professionals,
I'm using Colorbox plugin to display a certain div, but this issue appears.
the structure is as follow:
1- Hidden div to be displayed
2- Show btn to display the div
When I click the btn for the first time the div is displayed without any problems, but when I press ESC btn to close it and return the previous step again and click the btn the colorbox opens but without showing the div
This is the HTML code
<div class="to_be_show">
<!-- html structure is here -->
</div>
<p class="display">display</p>
This is the css style
.to_be_show{ width: 500px; height: 200px; background: red; display: none; }
This is the JS code
$('.display').click(function(){ $('.to_be_show').css('display','block'); });
$('.display').colorbox({opacity: 0.98,inline:true});
$(document).bind('cbox_closed', function() {$('.to_be_show').css('display','none'); });
So, What is the problem with my code ?!
-------- Update ----------
I know The problem but I don't know how to solve it !!!
I want to set the href attr of the display with Jquery as the content is loaded dynamically
and i use this and didn't work !!!
$('.show_album').colorbox({href:$(this).prev()});
Why ??!!
You can achieve this by creating inline color box
HTML Mark up
<div style="display:none">
<div class="to_be_show" id="to_be_show">
Element to be show
</div>
</div>
Display
css
.to_be_show {
width: 500px;
height: 200px;
background: red;
}
Js
$(document).ready(function () {
$(".inline").colorbox({
inline: true,
opacity: 0.98,
});
});
Here is working fiddle.
Don't forget to include
colorbox css & js
cheers!!!

Scroll element to top of page by clicking anchor inside element or anywhere inside containing div id

I would like to scroll the page to the top of the e.g. navigation div ID when clicking either any of the links inside the navigation div ID or (if possible) when clicking anywhere into the div ID itself containing the navigation links.
I have researched this and the closest I have come to is jQuery - How to scroll an anchor to the top of the page when clicked? however for some reason it does not seem to work when I try to do this in my example. What am I doing wrong?
I am new to jQuery and medium at html and css (and used inline styling of the divs since I did not want to supply a separate css just for the example).
When I load the html and script from jQuery - How to scroll an anchor to the top of the page when clicked? in Aptana it also does not scroll. Even with a content div above the div class work so that there is space to scroll to at all.
I have included two little paragraphs inside the concerning divs to explain exactly what I mean.
Any help is very much appreciated. Thank you.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$('#scroll_navigation ul li').click(function() {
$('html,body').animate({scrollTop: $(this).offset().top}, 800);
});
</script>
<body>
<div id="logo" style="margin: 0 auto; height: 300px; width: 60%; border: 1px solid #000">Logo</div>
<div id="scroll_navigation" style="margin: 0 auto; width: 40%; border: 4px solid #225599">
<p>Scroll navigation to top of page</p>
<p>Catch any clicks in "#scroll_navigation" to scroll the div id to the top of the page</p>
<div id="navigation">
<div class="container" style="margin: 0 auto; height: 220px; width: 60%; border: 1px solid #000">
<ul>
<p>Catch clicks on anchors to scroll the div id to the top of the page</p>
<li>Portfolio</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div id="content" style="margin: 0 auto; height: 1500px; width: 60%; border: 1px solid #000">Content</div>
</body>
EDIT
Beware this when using scrollTop in Firefox.
Animate scrollTop not working in firefox
jQuery scrollTop - no support for negative values in Mozilla / Firefox
Took me a while to figure out my code was fine but scrollTop was this issue in FF. In this same example the behaviour can also be observed. When scrolling down and making the anchors fixed, FF will scroll up to random positions either 2-4px before or after the target div.
I am now using Scrolld.js to achieve pixel perfect scrolling to the desired points across major browsers. I don't understand how different browser engines can render such a common thing as scrollTop from different (either html or body) inputs as far as I understand and I am new to jQuery. Guess this is not "the fault" of jQuery but how the browser engines render scrollTop.
I dont know if you did, but you have to include jquery to use it.
Another thing would be, that your "click listener" has to be in jqueries document ready function like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#scroll_navigation ul li').on('click', function(){
$('html,body').animate({scrollTop: $(this).offset().top}, 800);
});
});
</script>

Phototagging like in Facebook and Orkut album photos?

Is there a jQuery library or any leads on implementing that photo tagging like in Facebook and Orkut Photo albums?
Thanks
Hmmm, I found that the new version of Img Notes seems to do exactly what you want.
Checkout the Demo. It allows you to easily add tag notes and show them using JQuery. He also depends on the imgAreaSelect jquery plugin for adding notes.
you could try Jcrop or imgAreaSelect.
Not 100% the same behaviour as in Facebook, but with some tweaks, this should e possible.
I didn't find any suitable plugins for this purpose. So I ended up writing myself a small plug-in to mark areas over an image based on the coordinates loaded through an XML file.
The basic code is required is:
<div id="imageholder">
<!-- The main image -->
<img src="<link to image file>" alt="Image">
<!-- The grid tags -->
<div class="gridtag" style="bottom: 100px; left: 106px; height: 41px; width: 41px;"/>
<div class="gridtag" style="bottom: 300px; left: 56px; height: 100px; width: 56px;"/>
<div class="gridtag" ...
</div>
And the basic CSS styling required:
#imageholder{
height:500px;
width:497px;
position:relative;
}
div.gridtag {
border:1px solid #F0F0F0;
display:block;
position:absolute;
z-index:3;
}
In the above the divs with class "gridtags" are added using jQuery through XML or JSON and by binding events on this divs, we can make phototagging similar in Orkut.
PS: This only one side of the phototagging, ie. if we already have the coordinates we can mark on an image and add click events, which is the part actually i wanted. :) You guys has to write code for doing the marking part of the phototagging.
A good and complex example of tag like functionality in facebook is
Talking Pictures, Which is a facebook application.

Categories

Resources