JQuery - Trying to resize a Fancybox - javascript

I'm trying to resize a fancybox lightbox so that it doesn't take up the whole entire page. Here's the code I have so far:
<script type="text/javascript">
$(.fancybox.open({
autoDimensions: false,
width: "60%"
});​
</script>
But that doesn't do anything. Is there anything wrong with this code specifically?

You could try something like:
<script type="text/javascript">
$('.fancybox').css("width", "60%");
</script>
You may need to do this after the box is opened, if the box attributes are created when the box is first opened.
It looks like you are trying to do some function call, but I don't think that's needed. However, if you do need that, try using this:
<script type="text/javascript">
$('.fancybox').open(function(){
width: "60%"
});
</script>
Or, try this based on #Xetnus suggestions.

Related

Using variables in Javascript Open Function

I'm new to Javascript and I have what is probably a pretty basic question. I have some tools tips and want to open them with a click. I create a Javascript call on the click. I can pas the element ID I want to open, but I don't know how to get it to work in the Open call.
<script type="text/javascript">
function opentip(tipID) {
//alert(tipID);
$(#tipID).tooltipster('open');
}
</script>
It's not necessary the function opentip(tipID) to bind the mouse click. I will give you an genereic exemple. You have to import Tooltipster's CSS and JS, and jQuery, so the code will be:
<span class="tooltip" title="Tooltip content!">Target tag</span>
<script>
$(document).ready(function() {
$('.tooltip').tooltipster({
trigger: 'click'
});
});
</script>
When clicl on "Target tag" will appear an tooltip with "Tooltip content!" inside.
The $(document).ready(function() {}); is important to be sure that when the script runs, the browser have already the DOM ready, so the script can find the HTML elements.
You are using JQuery syntax. Insert JQuery plugin and add single quotes in your syntax $('#'+tipID).tooltipster('open'); and add inside document.ready
<script>
$(document).ready(function(){
function opentip(tipID) {
//alert(tipID);
$('#'+tipID).tooltipster('open');
}
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

.click method not working in jQuery

I placed smiley button for popping up new window and show smiles
<textarea class="chattextarea" placeholder="Type message" name="message" id="message" ></textarea>
<div class="smileybutton" id="smileybutton"></div>
and i wrote script like this
jQuery('#smileybutton').click(function() {
alert("Clickeddddd");
});
But the alert is not working.. if i placed another alert outside of bracket, it work on page loading.
PUT the function code like this
$(document).ready(function(){
jQuery('.smileybutton').click(function() {
alert("Clickeddddd");
});
});
Do not forget to include the jQuery library:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Then add your code inside a document.ready block:
$(document).ready(function()
{
$('#smileybutton').click(function()
{
alert("Clickeddddd");
});
});
Fiddle here:
http://jsfiddle.net/6tnmtf75/
Important: Somehow give dimensions to your #smileybutton so you have something to click on. I added some text on my example on jsfiddle. -i assume you have some css applied to it (width/height and a background image of a smiley maybe?)
It will be working if you change the Javascript by:
$(function(){
$('#smileybutton').click(function() {
alert("Clickeddddd");
});
});
Try putting the jQuery code inside document.ready, like this:
$(document).ready(
function() {
jQuery('#smileybutton').click(function() {
alert("Clickeddddd");
});
}
);
Or
jQuery(document).ready(
function() {
jQuery('#smileybutton').click(function() {
alert("Clickeddddd");
});
}
);
in case you don't want to use the dollar sign.
Also, be sure to include jQuery as suggested by Axel and Sharky.
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
Edit (special thanks to Axel and Sharky for pointing this out)
After short research, it turns out to be even better to put your script inclusions inside the body section of your Web page.
Here is JFiddle: http://jsfiddle.net/LSostaric/qjcu8862/.
Try this code, another way to track click event.
jQuery('.smileybutton').live('click',function(){
alert("Clickeddddd");
});
You need to be added document.ready as other said. If you add as external javascript file, you need to wrap in
$(function(){});
And For now, If you don't set width and height of div, it will be zero and no matter wherever you click, it won't attached with DOM. so you might need to set up div width and height as follows;
#smileybutton{
width:100px;
height:100px;
}
you can look in jsfiddle version.

Hide Image when another image is clicked

this seems to be simple.. but I am a bit noobish with jquery, maybe I am doing something silly wrong?
I want to click an image, and on that click, hide another image right next to it.
<script type="text/javascript">
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
</script>
Id's are correct as per the two images. What am I missing? Debugging it, the code never gets fired...
Thanks
EDIT
I had my control as a nested control on an asp masterpage, and its id was being rewritten. I have now fixed the id, but I still cant get any joy... I also see my markup is being rendered as an "input", would that make a difference?
<head>
<script src="js/jquery.min.1.5.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#butShowMeSomeUnits").click(function () {
$('#arrowUnitspic').hide();
});
});
</script>
</head>
<body>
<input type="image" src="bookings_media/buttons/show-me-some-units.png" onmouseout="this.src='bookings_media/buttons/show-me-some-units.png'" onmouseover="this.src='bookings_media/buttons/show-me-some-units_orange.png'" id="butShowMeSomeUnits" name="ctl00$ctl00$ContentPlaceHolder1$bookings_right_content$butShowMeSomeUnits">
</body>
EDIT
JS Fiddle
If there is any confusion... the JS fiddle I spooled up with the exact code also does not work...
You need to do do on page ready:
<script type="text/javascript">
$(document).ready(function() {
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
});
</script>
Edit:
The fiddle you provided did not work until I chose jQuery 1.10.1 from the dropdown. You will notice your onmouseover changes the element first, but once you click on the input it does hide the image. Can you verify this works the same for you?
If the answer is no then I don't think you are loading the jQuery library on your page. To check this should work:
if (typeof jQuery != 'undefined') {
alert("jQuery library is loaded!");
}else{
alert("jQuery library is not found!");
}
In addition it might be helpful to see what errors your browser console /dev tools is showing.
Wrap the code in jQuery.ready() event. And also check whether jquery js file is loaded or not.
$(document).ready(function(){
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
});
You code looks good and works check here
What you might be missisng is either:
to load jQuery script in the head of your page.
to include $(document).ready(function() { //code here }); in case your <img> tags are after the script in the page code. This is so your code loads when page is ready/loaded.
Steps that may help you:
make sure you integrate jQuery lib right. (to check that you might wanna open console on chrome and type $("html").hide(); and see if the current page dissapears)
make sure your custom JS file or code is UNDER the including of jQuery lib.
very good starting point with jQuery is to put everything in $(document).ready() as below example:
$(document).ready(function(){
$("img").click(function(){
$("img").hide();
$(this).show();
});
});

How to Specify an alternate panelContext - EasyTabs

I'm using the EasyTabs plugin by Alfa Jango on my website, and would like to have the panels seperated from tabs. He states in the documentation what I want to do;
Your panels can also be somewhere else in the DOM entirely (outside of
your tab container), if you specify an alternate panelContext.
The panelContext is any jQuery DOM element, in which easytabs will
look for the panels. By default, it's the container on which
easytabs() was called.
So, I understand I have to specify panelContext, say, to look for the panels in div#disconnected.
This is what I tried, but nothing works...
<script type="text/javascript">
$(document).ready( function() {
$('#tab-container').easytabs({
panelContext: '#disconnected';
});
});
</script>
Or trying to change the $container...
<script type="text/javascript">
$(document).ready( function() {
$('#tab-container').easytabs({
$container: '#disconnected'
});
});
</script>
Any help would be greatly appreciated!
I have a same problem as you, and found the answer:
You should type as:
<script type="text/javascript">
$(document).ready( function() {
$('#tab-container').easytabs({
panelContext: $('div#disconnected')
});
});
Found after looking the code here: Easy Tabs Github
Hope it helps

Jquery .css and dynamically generated images?

I'm generating some thumbnails using a url with querystring parameters, eg:
http://localhost:7229/GenerateImage.ashx?image=/media/map-v2.png&width=320&height=200
and I'm trying to assign this image to the background of an element using jquery:
<div id="myDiv"></div>
<script type="text/javascript">
$(document).ready(function() {
$('#myDiv').css("background-image", "http://localhost:7229/GenerateImage.ashx?image=/media/map-v2.png&width=320&height=200");
});
</script>
However the image isn't displaying. When I enter the url into my browser window, it does return an image as expected.. but for some reason I can't assign it as a background image using jquery.
Does anyone have an idea what I'm doing wrong here? Is there a problem using dynamically generated images with css?
Thanks
This should work, you weren't using the correct background-image syntax:
<script type="text/javascript">
$(document).ready(function() {
$('#myDiv').css("background-image", "url(http://localhost:7229/GenerateImage.ashx?image=/media/map-v2.png&width=320&height=200)");
});
</script>
May I also suggest two other modifications:
Your image param in your URL should be URL encoded
It's neater to use $(function(){}) instead of $(document).ready(function(){})
So the following would be the rewrite:
<script type="text/javascript">
$(function() {
$('#myDiv').css("background-image", "url(http://localhost:7229/GenerateImage.ashx?image=%2Fmedia%2Fmap-v2.png&width=320&height=200)");
});
</script>
With the following code it should work:
$('#myDiv').css("background-image", "url(http://localhost:7229/GenerateImage.ashx?image=/media/map-v2.png&width=320&height=200)");
You forgot to apply the url() for adding the background image.

Categories