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!!!
Related
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;
}
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.
This question already has answers here:
How do I select an element based on the state of another element in the page with CSS?
(3 answers)
Closed 7 years ago.
I can't quite get my head around this. I have the following construct:
<div class="container">
for n = 0 to ...
Link n
endfor
for each link in ".container"
<div class="poptip"></div>
endfor
</div>
And an example could be:
<div class="container">
Link 1
Link 2
Link 3
<div class="poptip">Some content related to link 1 retreived with ajax</div>
<div class="poptip">...</div>
<div class="poptip">...</div>
</div>
Now the hurdle, I am trying to show the .poptip on hover on the anchor tag, and this obviously works fine if there is one link (which is usually the case). In any case where there's >1 link, then the last one will work. Current css (sass style) which doesn't quite work in >1 cases:
.producttooltip {
position: relative;
}
.producttooltip a:hover + div {
display: block;
}
I cannot change the structure of the html, it will always be container > all links followed by all poptips. I can however mark the poptips and anchor tags up with unique identifiers e.g. Link 1<div class="poptip" rel="identifier"></div>, but I can't quite figure out if I in css can create a general selector which goes (pseudo):
a:hover + div[rel=a.rel] {
display: block
}
So my question is, can I get this construct marked up in pure CSS, or do I have to use some JS trickery (which I can, but I would really prefer CSS). Hope one of you guys are more clever than me.
Edit: just gonna clarify - I cannot change the structure of the html. The neatest solution would obviously be to wrap each element with it's equivalent poptip, but my entire conundrum is the fact that I cannot do this.
In your case, you can do this way:
$('a').on('hover', function() {
$('.poptip').eq($(this).index()).show();
}, function() {
$('.poptip:visible').hide();
});
It is tough to do this with CSS alone. But even then, I have provided a CSS solution below. Do have a look if you wanna consider a CSS only solution.
You can do this via CSS itself. Although there are lot of plugins, lets do something like this. First, you need a hovering element, say in this case, a link.
Hover Me!
Next should be the tool tip. We can have a <span> for now and put it inside the link.
Hover Me!<span class="tooltip">Hello, World!</span>
Now comes the real CSS part.
a span {display: none; position: absolute; color: #fff; background: #000; padding: 5px;}
a {position: relative;}
a:hover span {display: block; text-align: center;}
Snippet
a span {display: none; position: absolute; color: #fff; background: #000; padding: 5px;}
a {position: relative;}
a:hover span {display: block; text-align: center;}
Hover Me!<span class="tooltip">Hello, World!</span>
This is just one of a pure CSS solution. You can see the working fiddle here.
However, there are a lot of plugins, which keep this concept as base and work for hover-cards and tool tips. Some good examples include:
jQuery UI Tooltip
Tipsy
HoverCard
40+ Tooltips Scripts With AJAX, JavaScript & CSS
jQuery solution
You can use mouseenter/mouseleave event in order to show up the desired elements
$('a').on('mouseenter', function() {
var i = $(this).index();
$('.poptip').eq(i).show();
}).on('mouseleave', function() {
$('.poptip').hide();
});
.poptip {
width:100%;
float:left;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
Link 1
Link 2
Link 3
<div class="poptip">Some content related to link 1 retreived with ajax</div>
<div class="poptip">Some content related to link 2 retreived with ajax</div>
<div class="poptip">Some content related to link 3 retreived with ajax</div>
</div>
Using jquery this can be achieved easily, just need to get the index of the current anchor element & display the respective div present at the index location.
HTML CODE:
<div class="container">
Link 1
Link 2
Link 3
<div class="poptip">Some content related to link 1 retreived with ajax</div>
<div class="poptip">...</div>
<div class="poptip">...</div>
</div>
JS CODE:
$(function(){
$('a').on('hover',function(){
var ind = $('a').index(this);
$('.poptip').eq(ind).css('display','block');
});
});
Live Demo # JSFiddle
At the moment I have a website that grabs the 12 most recent posts from a category, and displays them as a link to their permalink, with the post thumbnail image as the link image.
You can see a working example here: http://mathewhood.com/sitefiles/
What I want to do, is somehow add functionality into my loop that will allow me to make it so that when you click on one of these list elements, it will display the_content(); for each element.
I found this - http://gsgd.co.uk/sandbox/jquery/easing/ Which I think may provide the functionality that I want (ideally jswing in and out), but I am struggling at implementing it! If anyone knows how I could make this happen please answer this and receive your well deserved up-votes!
http://jsfiddle.net/XzJgU/ - Here is my current loop so far, any help will be greatly appreciated!!!!!!!!!
Here is my solution to your problem. I'm giving an example on how to implement jquery Easing.
EDIT
revised my post, please
View revised sample here
Hope it helps.
$('.thumbs').click(function(e){
e.preventDefault();
var contents = $(this).closest('.recentPost').find('.caption').html();
var $container = $('#theContainer').html(contents);
$container.show().animate({height:200}, {duration: 1000, easing: 'jswing'}).animate({height:100}, {duration: 1000, easing: 'easeInOutCirc'});
$container.click(function(){
$container.animate({height:200}, {duration: 1000, easing: 'easeInExpo'})
$container.fadeOut('slow');
$container.html('');
});
});
Something like that should work - http://jsfiddle.net/XzJgU/5/. It renders the content for each post in the loop, hidden by default using CSS. When a post is clicked, it moves its content to #displayed-post, making it visible. When another post is clicked, its moves back to its original container and the new post content is moved there.
I'm not entirely clear on how you want this to work - are you looking for a PHP solution or a JavaScript one or perhaps a mix of the two. I've got two suggestions on how you might make it work. Also, note that the jQuery library you're referring only adds easing options to jQuery - i.e. it only deals with animation and not with the business logic and behaviour of your code.
Using ajax
This should work in this case since you're not making cross-domain requests. Essentially, you'd intercept the click to the link, figure out where it's pointing and then make a GET request to that page. You'd then filter out the appropriate HTML from the response and put it into your page. Something like this:
$('.recentPost a').click(function(){
$.get($(this).attr('href'), function(data){
//make a get request to the page the link linked to
//and extract the blog content div
$("placeholder").html($(data).filter(".blogRight"));
});
return false; //cancel the browser's default action on click to keep user on page
});
where you'd have a <div id="placeholder" /> in your HTML page where you'd like the content to appear.
Using PHP + JavaScript
Instead of fetching the content on demand, you'd generate it when the page loads but keep it hidden. You'd again intercept clicks but this time you'd find and display the appropriate, existing div on the page.
So your generated page would look something like this:
<div id="contentWrap">
<div class="hidden-featured-content" id="content-f12">
<div>Your content here</div>
</div>
<div class="hidden-featured-content" id="content-f11">
<div>Your content here</div>
</div>
<div id="newBanner"></div>
<div class="recentPost">
<img width="204" height="144" src="http://mathewhood.com/sitefiles/wp-content/uploads/2011/08/featured12.png" class="attachment-post-thumbnail wp-post-image" alt="featured12" title="featured12" />
<a href="http://mathewhood.com/sitefiles/?p=35"><div class="caption">
<div class="captionTitle">Hello World 12!</div>
<p></p>
</div></a>
</div>
<div class="recentPost">
<img width="204" height="144" src="http://mathewhood.com/sitefiles/wp-content/uploads/2011/08/featured11.png" class="attachment-post-thumbnail wp-post-image" alt="featured11" title="featured11" />
<a href="http://mathewhood.com/sitefiles/?p=32"><div class="caption">
<div class="captionTitle">Hello World 11!</div>
<p></p>
</div></a>
</div>
...
You could then use something like to toggle the appropriate content
$('.recentPost a').click(function(){
if($(this).attr('id')){
var x = /link-(.*)/.exec($(this).attr('id')); //figure out which content- div to display
$('.displayed').hide().removeClass('displayed'); //hide already displayed content
$('#content-' + x[1]).show().addClass('displayed'); //show content and mark it as displayed
return false;
}
});
There are a number of ways to achieve this. The most efficient would probably be a full ajax solution but that would require a Wordpress plugin and some advanced scripting.
The most straightforward solution would be to add a box for dynamic content, output the content for each post in a hidden DIV under it's permalink/image, then use javascript to move content from the hidden DIVs to the dynamic content box when a permalink is clicked. I've worked up some code at http://jsfiddle.net/HF9Pr/.
Try this:
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
div.panel,p.flip
{
width: 203px;
margin: 0px;
padding-top: 9px;
padding-bottom: 9px;
padding-left: 12px;
padding-right: 12px;
background: #c1e0fb;
border-left: 1px dashed #aaa;
border-right: 1px dashed #aaa;
}
div.panel
{
height: 288px;
display: none;
border-top: 1px dashed #aaa;
}
p.flip
{
border-top: 1px dashed #aaa;
border-bottom: 1px dashed #aaa;
}
</style>
</head>
<body>
<div class="panel">
<b>sclughslru</b>
<br><br>
ertljhvij3p
<br><br>
<b>veuywihtp</b>
<br><br>
ghdjhrntnd
<br><br>
<b>ehv3rtv</b>
<br><br>
vt4k4kb76kb5
<br><br>
<b>edb3jrr3n54</b>
<br><br>
skcehgkheone
</div>
<p class="flip"><img src="https://dl-web.dropbox.com/get/Pictures/Other/up-down.jpg?w=f17ee285" style="width: 12px; height: 10px; margin-right: 10px;" />Information</p>
</body>
let say i have a print button on couple of pages and whenever user click .
it will pop up the content in a modal and can print from there.Any idea will be appreciated.
I have couple of page with a print button . when user click it need to pul that content in a modal and than print from that modal.
I can't write the code for you right now but I can put you on the right track..
You need to use jquery to get the contents you want to print (likely $('body').html();) then create your modal div popup and add an iframe into the modal div. Then add to the iframes body (via $('iframe').document.body.append();) the print content. Then, call print on the iframe ($('iframe').window.print;)
Let me know if this makes sense?
EDIT: Here is some example code working with what I believe you want. (make sure you include jquery before this javascript code)
<body>
<script>
$(document).ready(function(){
$('#printmodal').click(function(){
// variables
var contents = $('#printable').html();
var frame = $('#printframe')[0].contentWindow.document;
// show the modal div
$('#modal').css({'display':'block'});
// open the frame document and add the contents
frame.open();
frame.write(contents);
frame.close();
// print just the modal div
$('#printframe')[0].contentWindow.print();
});
});
</script>
<style>
#modal {
display: none;
width: 100px;
height: 100px;
margin: 0 auto;
position: relative;
top: 100px;
}
</style>
<!-- Printable div (or you can just use any element) -->
<div id="printable">
<p>This is</p>
<p>printable</p>
</div>
<!-- Print link -->
<a id="printmodal" href="#">Print Me</a>
<!-- Modal div (intially hidden) -->
<div id="modal">
<iframe id="printframe" />
</div>
</body>
jsfiddle: http://jsfiddle.net/tsdexter/ke2rqt97/