We Keep Coding

Why Colorbox doesn't work on click event?

I'm using Colorbox in my app. What I'm looking for is, on page load hide div (.box) and when I click on the link, it opens (div.box) and shows it's title (My Box) and style.
<div class="click" href="link">Click here!</div>
<div class="box" style="width:700; height:800;" title="My Box">
<p>Content goes here</p>
</div>
Here is what i have tried.
<script>
$(document).ready(function () {
$('.box').hide();
$('.click').click(function () {
open_colorbox(newWidth, newHeight, newTitle);
});
function open_colorbox(c_width, c_height, c_title) {
var options = {
width: c_width,
height: c_height,
title: c_title,
overlayClose: false
};
$.colorbox(options);
}
});
</script>
The above solution doesn't work. What am I missing here?
UPDATE 1:
Based on the below comments and answer(s) I only use one line to open colorbox, but still not working!!!
<script>
$(document).ready(function () {
$('.box').hide();
$('.click').click(function () {
$(".box").colorbox({ open: true });
});
});
</script>
UPDATE 2:
Thanks to #Franklin. His solution is the correct one. Here is an example of how simple Colorbox can be done. http://codepen.io/egyamado/pen/Jnxvi

Inside your click function, can't you just do...
Try adding #id of the div
$(".box").colorbox({href:"#id", inline:true});
Or
$("a.click").colorbox({href:"#id", inline:true});

Creating modal with different link

I am trying to create a page with different news articles(each article page directs to a different page that was created). Using modal can I create an environment where the page pop's up in the same window rather than opening in another window? If yes, can someone please help me with the code and example?

Yes, use jQuery modal dialogs. You can have a link or button for each article and when it gets clicked, open a modal dialog with the article's text.
See this JSFiddle for a working example.
<div class='article' id="article1">
<p>This is article 1, etc...</p>
</div>
<button id='article1Button'>Article 1...</button>
<div class='article' id="article2">
<p>This is another article...</p>
</div>
<button id='article2Button'>Article 2...</button>
And the javascript:
$(document).ready(function(){
$(".article").dialog({
autoOpen : false,
resizable : false,
width : 400,
height: 400,
modal : true,
buttons: {
"Close" : function(){
$( this ).dialog( "close" );
}
},
close : function(ev, ui) {
return true;
}
});
$('#article1Button').click(function(){
$("#article1").dialog("open");
})
$('#article2Button').click(function(){
$("#article2").dialog("open");
})
});

Any idea why my simple script stops working halfway down the page?

I have a simple modal script that worked fine in the past, but for some reason it will refuse to work after the 10th image.
<div class = "images_container"> <!-- Image 1 -->
<div class = "images image_1">
<div class = "hover_alpha">
<div class = "plus">
</div>
</div>
</div>
<div class = "images image_2"> <!-- Image 2 -->
<div class = "hover_alpha">
<div class = "plus">
</div>
</div>
</div>
<div class = "images image_3"> <!-- Image 3 -->
<div class = "hover_alpha">
<div class = "plus">
</div>
</div>
</div>
<div id="image_1_content">
<img src = "images/1.jpg">
</div>
<div id="image_2_content">
<img src = "images/2.jpg">
</div>
<div id="image_3_content">
<img src = "images/3.jpg">
$('.image_1').click(function () {
$('#image_1_content').modal({
close: true,
overlayClose:true,
position: [150,70],
opacity:80,
overlayCss: {backgroundColor:"#fff"}
});
return false;
});
$('.image_2').click(function () {
$('#image_2_content').modal({
close: true,
overlayClose:true,
opacity:80,
position: [150,70],
overlayCss: {backgroundColor:"#fff"}
});
return false;
});
$('.image_3').click(function () {
$('#image_3_content').modal({
close: true,
overlayClose:true,
opacity:80,
position: [150,70],
overlayCss: {backgroundColor:"#fff"}
});
return false;
});
The code is pretty much identical to the 21st image. However, the script refuses to work after the 9th image, starting from the 10th image. I'm baffled as to why or how this is happening. Any input?
Reference: http://spuxystudios.com/cocktails/

You should use a class selector, and iterate through them, or something of that matter to consolidate your code, and use less code. Also, lowers chance of a typo or syntax related bug. Also, it is working, but is being placed out of the viewport. Just zoom out and you will see. It places based on how the element fell on the dom. So just fix how you are placing the modal. Thats all!

On the page you referenced to you change position: [150, 70] to higher values, this and position: fixed makes your modal appear where it is not visible. Put position: [150, 70] everywhere. Also, you should follow #Casey advice and use iteration to reduce amount of code.

Looking at the source of the site, you can see that the position is actually different for each row of images. Here is an example:
$('.image_6').click(function () {
$('#image_6_content').modal({
close: true,
overlayClose:true,
opacity:80,
position: [550,30],
overlayCss: {backgroundColor:"#fff"}
});
return false;
});
$('.image_7').click(function () {
$('#image_7_content').modal({
close: true,
overlayClose:true,
opacity:80,
position: [950,30],
overlayCss: {backgroundColor:"#fff"}
});
return false;
});
As others have said, this is better done with a generic class.
You can put the content in the same div and hide it by default.
<div class="cocktails">
<div class="cocktail">
<img 1>
<div class="more_info">modal content</div>
</div>
<div class="cocktail">
<img 2>
<div class="more_info">modal content</div>
</div>
</div>
$('.cocktails').on('click', 'img', function() {
$('.more_info', $(this)).modal({
close: true,
overlayClose:true,
opacity:80,
position: [150,70],
overlayCss: {backgroundColor:"#fff"}
});

like others have noticed, the positioning is not consistent. i dont see your CSS but maybe you can get a quick win with some nifty CSS setting. Try positioning the pop-up relative to the window

How to dynamically load content from an external url, inside of a jquery ui modal dialog widget?

I asked this question before, but I don't think I explained properly for what I am trying to accomplish.
There are multiple links on my website and I want to open the content from the link in a jquery ui modal dialog widget.
I'm trying to use 'this' to reference the link that the user selects dynamically.
What am I doing wrong here?
The code I'm using is below:
comment #1
comment #2
comment #3
<div id="somediv"></div>
<script type="text/javascript">
$(document).ready(function() {
$("#somediv").load(this.getTrigger().attr("href")).dialog({
autoOpen: false,
width: 400,
modal: true
});
$("#test").click(function(){$( "#somediv" ).dialog( "open" );});
});
</script>

http://jsfiddle.net/qp7NP/
A couple changes: changed ID to Class and used IFrame.
comment #1<br>
comment #2<br>
<a href="http://ask.com/" class="test" >comment #3</a><br>
<div id="somediv" title="this is a dialog" style="display:none;">
<iframe id="thedialog" width="350" height="350"></iframe>
</div>
<script>
$(document).ready(function () {
$(".test").click(function () {
$("#thedialog").attr('src', $(this).attr("href"));
$("#somediv").dialog({
width: 400,
height: 450,
modal: true,
close: function () {
$("#thedialog").attr('src', "about:blank");
}
});
return false;
});
});
</script>
In case you want to pull in the HTML instead of IFrame, you will have to use Ajax (XMLHttpRequest), something like this: http://jsfiddle.net/qp7NP/1/

You can't have multiple elements with the same Id.
Change your links to to class="test" instead and therefore your click event to $('.test').click().
Also if you still have problems, and I remember I had some similar issues because how JQUery Dialog behaves itself with the DOM. It will literally rip your #somediv out of content and append it to the bottom of a page to display that dialog. I solved my dynamic dialog loading issues with wrapping it in another div.
<div id="somediv-wrap">
<div id="somediv">
</div>
</div>
<script>
$(document).ready(function() {
$("#somediv-wrap").dialog({
autoOpen: false,
width: 400,
height:200,
modal: true
});
$(".test").click(function(event)
{
event.preventDefault();
var link = $(this).attr('href');
$("#somediv").load(link,function(){
$( "#somediv-wrap" ).dialog( "open" );
});
});
});
</script>

Get size of Image when jQuery accordion applied

It seems like in jQuery when an element is not visible width() returns 0.
when I remove the accordion the height is reported correctly. I tried wrapping the images in a div and setting the div's display to block , but this didn't work either.
is there any alternative to find image original size when accordion applied?
<div id="accordion">
<h3>Click me</h3>
<div>
<div class="bg">
<img src="your_img_url">
</div>
</div>
<h3>Click me</h3>
<div>
<div class="bg">
<img src="your_img_url"/>
</div>
</div>
</div>
$(document).ready(function() {
$('#accordion').accordion({
autoHeight: false,
collapsible: true,
});
$("img").load(function() {
alert($(this).height());
alert($(this).width());
});
});

Setting a specific width and height on the images will return that width and height. This can be done in CSS or using the width and height attributes on the <img> element.
Changing your images to <img src="your_img_url" style="height: 20px; width: 20px;"> should work.
If you need original width, you could do something like this:
var img = $('img').clone().appendTo('body').hide();
img.load(function () {
alert($(this).width());
alert($(this).height());
});
This answer has more detailed information on how to get the original size.

Works for me!
Do you have accordion plugin?
if not: http://bassistance.de/jquery-plugins/jquery-plugin-accordion/
is it added to script?
yo should remove last , to collapsible: true,
it sould look like this:
$(document).ready(function() {
$('#accordion').accordion({
autoHeight: false,
collapsible: true
});
$("img").load(function() {
alert($(this).height());
alert($(this).width());
});
});
But it works anyways!