On Qualtrics,
I am trying to pipe and resize one of my image answer to another question.
For example,
Q1: Selected Answer A(a image)
Goal: To Pipe and Resize it to Q2
Q2: ${q://QID2/ChoiceGroup/SelectedChoice} <---how do I resize it?
Is there any way I can do that?
Thank you and appreciate your help :)
Even though you haven't provide any code, I'll make an exception to get you started...
You add JavaScript by clicking on the cog to the left of the question (the second question in your scenario) and select Add JavaScript. Then replace what is there with this:
Qualtrics.SurveyEngine.addOnload(function() {
jQuery("#"+this.questionId+" img").css({"width":"200px","height":"200px"});
});
Change 200px to your desired width and height. Assuming there is only one image in the question, the code finds the <img> element within the current question <div> and adds width and height styles to it.
Related
Hope So All Of You are Fine.
I have an assignment in which i have to animate some image to a circular div container at its any random place.
Right Now, I had done this Already.
jsfiddle.net/f4p6b/137
But The Problem is that the Container in jsfiddle is not Circular.
I want a Circular div container and image should drag/animate automatically on page load at some random place every time.
Kindly help me with the help of above jsfiddle code.
Thanks.
Add the following css property to make your container circular
border-radius: 50%;
As mentined above, you can add the border-radious:50% attirubute to make your Div circular.
Check out this JSFiddle:
http://jsfiddle.net/internetbird/f4p6b/139/
Check out this updated fiddle :
http://jsfiddle.net/internetbird/f4p6b/141/
I added a function which produces a random point inside the circle (with a little math, which you can find more explination here: Simplest way to plot points randomly inside a circle )
Well as the title says.
Right now each signature (on a forum) div got:
<div style='height:Xpx;overflow:scroll'> (X = depends on each signature due to the image heights shifting)
And I want to change the height so I don't have to scroll through each signature, but showing all images directly.
Here is the right part of a signature:
http://puu.sh/4xOW7.jpg (couldn't use the website-image-feature due to not having 10 rep)
And I tested around and managed to make it like this:
http://puu.sh/4xPar.jpg (it's much more further down)
and like this..
http://puu.sh/4xPco.jpg (couldn't post more than 2 links -_-)
I also tried to remove the overflow:scroll, change it, and so on. (also tried removing height: etc)
But I just can't get it to simply remove the scrollbar - making all images show normally. I'd really appreciate help! :)
instead of style="height:250px;overflow: auto;"
you need style="display:inline;"
I have a div that changes in height based on the content (its width is fixed).
I want to execute a function each time this automatic change in div height occurs.
Can someone please help me achieve this?
Thanks in advance!
EDIT:
The div height changes when I drag and drop some content on the div. (I am using JQuery UI draggable-droppable). So, the change in height is user initiated.
I found an excellent solution here, created by the Filament group: http://filamentgroup.com/lab/setting_equal_heights_with_jquery/ - please do not click this; it seems the resource has been removed.
Alright so I don't know if it can be done, but with the great minds we have here on stackoverflow, I'm confident someone can point me in the right direction.
So I am looking to dynamically update the href tag for an image so when the user chooses a different product option (lets say a different scent) the image link will take the user to that scent's larger image file.
Here's the code so far:
$("#main-image").attr("href", $('.more-views ul li a img[alt="' + $select.find('option:selected')[0].getAttribute('product_id') + '"]').attr('src'));
So that's the easy part. Now the tricky part is shaving down that url that the code gets.
Right now it only gets the smaller version of the image to populate the expanded view.
I need it to get the larger image.
This is the link for the larger image:
http://staging.greencupboards.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/feeds/MrsMeyers/MRM-64565-a.jpg
And here is the link for the smaller image:
http://staging.greencupboards.com/media/catalog/product/cache/1/image/370x/9df78eab33525d08d6e5fb8d27136e95/feeds/MrsMeyers/MRM-64565-a.jpg
notice how the smaller image has the 370x in the pathname. Is there any way I can treat this as a string and filter this out??! Keep in mind I need to use the .attr code from above.
Let the javascript geniuses to it!
Thanks in advance!
Just add a .replace(/370x\//,'') to .attr('src')
$("#main-image").attr("href",
$('.more-views ul li a img[alt="'
+ $select.find('option:selected')[0].getAttribute('product_id')
+ '"]')
.attr('src')
.replace(/370x\//,'') );
I have a table having td with two div's.Now, On clicking a div should expand second div and the td should also get expanded.Again on clicking the div the td should come to normal width
mixing table layout (deprecated) with div box model can result in really strange stuff...
You'll probably not want that, but anyway:
You will need JavaScript to change the second Div's dimensions, and from what I understand you want an easing animation as well. I propose taking a look at mootools or scriptaculous, if that is so.
Please allow me to break down the literal meaning of your terrible post, so you can appreciate just how frustrating it is to try to answer these spur-of-the-moment/last-ditch-effort creations.
I have a table having td with two div's
<table>
<tbody>
<tr><td><td><div></div><div></div></td></tr></tr>
</tbody>
</table>
Notice how this code is rather bland, uninformative, and probably not an accurate representation of what you're dealing with? That's because it's all that you've provided. Next time maybe try including and link to your page, a jsFiddle, or maybe even just a more precise explanation.
Now, On clicking a div should expand second div and the td should also
get expanded.
Expand what? How much? What about the row height or column width? Does the table need to stay the same size? How about any shred of direction here. If all else fails, before and after pics drawn in MSpaint are fine.
Again on clicking the div the td should come to normal width
Although this really isn't an English sentence I think I get the gist. However, this "width" information is probably part of the unspoken meaning of "expand" we talked about earlier. Bottom line: provide some html; get a concise answer.
Try this
var oldWidth = 200;
var newWidth = 200;
$("td div:first").click(function(){
if(!$(this).next("div").is(":visible")){
$(this).next("div").show('slow');
$(this).closest("td").width(newWidth);
}
else{
$(this).next("div").hide('slow');
$(this).closest("td").width(oldWidth);
}
});