We Keep Coding

Getting hidden text field with url to update image on hover jQuery

I'm testing out some jQuery and want to update a image when hovering over a specific div or link block.
So what i was trying to do is when hovering over .test-block get the hidden text with the url and update it on .large-image-2. It can't seem to get the specific text on hover.
This is the code i have come up with:
$('.test-block').on('onmouseenter', function() {
let myUrl = $(this).find('.display-hidden').text();
$('.url').text(myUrl);
});
Im testing on this page: https://jquery-testing.webflow.io/update-image the three bottom div's and bottom picture on right is what i want to use.
Thanks in advance!

There are a few issues with your example. Mainly the way you register the event handler.
For jQuery the correct way would be $(target).on('mouseenter') - Ommit the on... part for the event you want to register when doing it through jQuery.
I would probably implement the functionality you're looking for in a less specific way and with simpler handles like the following:
$(function () {
let divs = $('[data-image-target][data-image-url]');
divs.on('mouseenter', function () {
let that = $(this)
const target = that.data('image-target')
const url = that.data('image-url')
$(target).attr('src', url);
})
divs.first().trigger('mouseenter')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div
data-image-target="#my-target-image"
data-image-url="https://dummyimage.com/600x400/000/fff&text=one">
Hover One
</div>
<div
data-image-target="#my-target-image"
data-image-url="https://dummyimage.com/600x400/000/fff&text=two">
Hover Two
</div>
<div
data-image-target="#my-target-image"
data-image-url="https://dummyimage.com/600x400/000/fff&text=three">
Hover Three
</div>
<img id="my-target-image">
Explanation:
Data attributes:
Two data attributes are getting used in my example: data-image-target and data-image-url.
Using data attributes on the elements you want the event to be fired on will make your script a bit more robust and less prone to errors, since the event registration is bound to the two attributes being present using attribute selectors for the jQuery selector $([data-image-target][data-image-url]) instead of arbitrary classnames and/or ids.
The data-image-target should have a CSS selector that points to the <img> element(s) you wish to switch the src url on, while the data-image-url should hold the url of the image you want to switch to.
The code above could even replace your existing functionality for the top 3 images on your page.

This code worked
$(function () {
let divs = $('[data-image-target][data-image-url]');
divs.on('mouseenter', function () {
let that = $(this);
const target = that.data('image-target');
const url = that.data('image-url');
$(target).attr('src', url);
});
});
Thanks to Morten for providing. With Webflow i also had to do Command + Shift + O to turn off responsiveness to the image. (when on image settings)
Attributes:
Name: data-image-target
Value: #my-target-image
And
Name: data-image-url
Value: (image url, in my case Webflow: https://uploads-ssl.webflow.com/something)
These two attributes to each hover element.
Name: id
Value: my-target-image
This to the image element to show images. (if Webflow; "my-target-image" goes in the ID field in element settings.

Bootstrap popover only one time for multiple positions

I have a table on my website. I would like to give the user the possibility to easily add comments to each of the row.
For that i found a nice looking comment view on the internet.
here is an example:
<div class="popover-markup">
Popover link
<div class="content hide">
code
</div>
</div>
$('.popover-markup>.trigger').popover({
html: true,
title: function() {
return $(this).parent().find('.head').html();
},
content: function() {
return $(this).parent().find('.content').html();
}
});
http://jsfiddle.net/dzr521qs/424/
This is basically exactly what i would like to have. But... I need a form inside of the comment view to post data to my server. And since i have around 50-300 Entries in the table, it would generate a ton of code if i have to place the code for the popover for every single row.
so my question is:
is it possible to define the popover once and show always the same popover but with different content for every row?
I would like to have a small icon on every row whith which i can open the popover and give over an id to the popover to load dynamic content.
hope someone have an idea.
thanks

You can add additional attribute to your popover link (say data-target) that will point to an element you want to display as content.
You can extract data attribute value inside content() callback and use it to display different content.
Example:
// inside popover(...)
content: function() {
var contentSelector = $(this).data("target");
if (contentSelector && $(contentSelector).length > 0) {
return $(contentSelector).html();
} else {
return "<div class='alert alert-warning'>Please specify data-target attribute pointing to element in page</div>";
}
}
// in your trigger add `data-target` attribute
<a ... data-target=".content">...
Here's an updated fiddle demonstrating that solution

Javascript show/hide - I don't want it to hide the entire element

This is probably a fairly easy question, but I'm new to JavaScript and jquery....
I have a website with a basic show/hide toggle. The show/hide function I'm using is here:
http://andylangton.co.uk/articles/javascript/jquery-show-hide-multiple-elements/
So here's my question..... I would really like the first 5-10 words of the toggled section to always be visible. Is there some way I can change it so that it doesn't hide the entire element, but hides all but the first few words of the element?
Here's a screenshot of what I would like it to do:
http://answers.alchemycs.com/mobile/images/capture.jpg

There are many different implementation possibilities:
You can divide the contents up into the first part and the second part (two separate spans or divs inside your main object) and hide only the child object that represents the second part, not hide the parent object.
Rather than hide the object at all, you can set its height to only show the first part (with overflow: hidden)
Change the contents of the main object to only have the first part as the contents (requires you to maintain the full contents somewhere else so you can restore it when expanded again).
Here's a working example of option 1: http://jsfiddle.net/jfriend00/CTzsP/.

You'd need to either:
Put in a span/etc. after the first n words, and only hide that part, or
Change the viewable region, or
Replace or toggle the span/etc. with the "collapsed" view.
The last is a bit more customizable; using two separate elements allows trivial games to be played (showing an image, for example, like a little curly arrow) without modifying adding/removing DOM elements.
I tend towards the last because it's simple and obvious, but that's a personal preference, and really isn't as true as it used to be.

You can do some plugin authoring,I did a sample demo here ,based on your screenshot
<div class="toggle">ShowHide</div>
<div class="content">some content some content some content some content some content <br/> some content some content some content </div>
<div class="toggle">ShowHide</div>
<div class="content">some content some content some content some content some content <br/> some content some content some content </div>
here is javascript/jquery code
jQuery.fn.myToggle = function(selector, count) {
var methods = {
toggle: function(selector, count) {
if ($(selector).is(':visible')) {
var span = $('<span>');
span.text($(selector).text().substr(0, count) + "...");
span.insertAfter($(selector));
$(selector).hide();
}
else {
$(selector).show();
$(selector).next('span').hide();
}
}
};
$(this).each(function() {
methods.toggle($(this).next(selector), count);
$(this).click(function(evt) {
methods.toggle($(this).next(selector), count);
});
});
};
$(function() {
$('.toggle').myToggle('.content', 3);
});

Here is a solution using css properties only instead of mangling the dom.
http://jsfiddle.net/AYre3/4/
Now if you want some sort of animation happening as well you'll probably need to do a bit of measurement along the way.

How to make those dynamic anchor links with jQuery?

I've recently discovered a website which does something really cool! Example:
There are two links "Cat" and "Dog".
There are two DIV containers, id="catImage" and id="dogImage"
The initial URL looks like http://mysite.com/#cat
Initially, the cat image is visible
Clicking on the Dog link will fade out the catImage div and fade in the dogImage div
Additionally, it will change the anchor in the browser URL to: http://mysite.com/#dog
Opening the website with httü://mysite.com/#dog will show the dog image initially
Is this possible using jQuery? How would I scan for that anchor, and how would I call a function when the link is clicked without causing the link to follow some URL? I'm an objective-c dude and don't know anything about JS... hope my question isn't too dumb for you.

with this markup:
<div id="images">
<div id="catImage">some cat image here</div>
<div id="dogImage" style="display:none;">some dog image here</div>
</div>
<div id="anchors">
catImage anchor
dogImage anchor
</div>
and with this js (assuming jquery 1.4.x)
$(function () {
$("#anchors a").click(function () {
// send the index of the anchor to the function
fadeImage($(this).index());
});
var hash = window.location.hash;
if (hash) {
var elementId = "#" + hash.substring(1) + 'Image';
var $div = $(elementId);
// check if this element exists, and if so, send that index to the function
if ($div.length) {
fadeImage($div.index());
}
}
});
function fadeImage(index) {
$("#images div:eq(" + index + ")").fadeIn().siblings().fadeOut();
}
And to explain what's going on here:
I'm using the jquery index() function to get the index of the element relative to its siblings. I then pass that index to the fadeImage function, which finds the same index div and fades it in. By using chaining, I then look to the siblings of that div to fade them out. This is useful if you have more than 2 divs to fade out here.
For the anchor/hash usage, I just find the div with the matching id and get its index, and pass it to the same function.
jQuery docs can explain the various methods much better than I can.

Using location.href you can get the full URL in javascript.
you can substring or string replace your domain name and rest will be your parameter dog or cat.
When you have the parameter .
jquery functions like show(); hide (); to show cat and hide dog.
By adding or removing style also you can change images
.add() is there
addClass removeClass is there
http://mattwhite.me/11tmr.nsf/D6Plinks/MWHE-695L9Z
http://rockmanx.wordpress.com/2008/10/03/get-url-parameters-using-javascript/
http://api.jquery.com/show/
http://api.jquery.com/addClass/

Update: Oh I forgot, obviously you should read a tutorial about jQuery if you want to use it.
You can get and set the hash of the URL via window.location.hash, e.g.
alert(window.location.hash);
//and
window.location.hash = 'test'
You should read about events in order to fully understand how it works. The event object provides a preventDefault() method, which is exactly doing what it says (preventing the default behavior).
E.g. with jQuery:
$('a').click(function(e) {
//Do something..
// prevent to follow the link
e.preventDefault();
});

Play with Div using jQuery or Javascript

I want to move specific div to up on the up link. Same as to move div to down on the
down link. As shown in screenshot, same as i want to insert div before specific div on the
'IB' link. I want to insert div after specific div on the 'IA' link. To delete specific div on the 'D' link.
alt text http://freeimagehosting.in/images/204_screen_j.jpg
screenshot
Now of course there will be many alternatives are available to achieve above features like jquery, normal javascript, etc.
But I would like to know that which will be the best way to achieve this.
Any feedback would be highly appreciated...!
EDIT : screenshot link is up now !!

jQuery definately makes this sort of thing a bunch easier.
Given this simple markup:
<div class="moveable" id="div1">
One
Move up
Move down<br/>
</div>
<div class="moveable" id="div2">
Two
Move up
Move down<br/>
</div>
<div class="moveable" id="div3">
Three
Move up
Move down<br/>
</div>
This jQuery will move an element up or down:
$('.moveable a.up').live('click',function(){
var $div = $(this).parent('.moveable');
var idx = $div.index();
if(idx>0){
$div.remove();
$('div.moveable:eq(' + (idx-1) +')').before($div);
}
return false;
});
$('.moveable a.down').live('click',function(){
var $div = $(this).parent('.moveable');
var idx = $div.index();
if(idx<$('div.moveable').length-1){
$div.remove();
$('div.moveable:eq(' + idx +')').after($div);
}
return false;
});
That should give you enough to go on to start doing an insert too.
Here's the fiddle if you want a demo: http://jsfiddle.net/5hF98/

Have you looked at the Jquery-UI Sortable code, it may not be exactly what you need, but it is an option.