I'm trying to clone links in order to make a series of images clickable links. I tried using some of the code examples in jQuery - Copy a dynamic link from one element to another. It's not working.
Given the following HTML code:
<ul class="slides">
<li class="views-row views-row-1 views-row-odd views-row-first">
<div>
<img src="https://www.sfmta.com/sites/default/files/styles/home_slide/public/homeslides/2017/Clipper%20on%20Muni-1.png?itok=PPZNHt_N" width="630" height="369" alt="Image with a Clipper Card and illustrated Muni bus with text: Get Clipper and save on Muni." title="Get Clipper and save on Muni" />
</div>
<div class="slider-caption">
<div class="row-fluid">
<div class="span6 offset6">
<div class="slider-caption-inner">
<h2>
New Muni Fare Changes
</h2>
<p>New Muni fares include single-ride savings for using Clipper and MuniMobile.</p>
Learn more
</div>
</div>
</div>
</div>
</li>
... (more list items)
</ul>
I am seeking the following result, with line 4 of the code being the only changed line (surrounding img with a cloned anchor tag):
<ul class="slides">
<li class="views-row views-row-1 views-row-odd views-row-first">
<div>
<img src="https://www.sfmta.com/sites/default/files/styles/home_slide/public/homeslides/2017/Clipper%20on%20Muni-1.png?itok=PPZNHt_N" width="630" height="369" alt="Image with a Clipper Card and illustrated Muni bus with text: Get Clipper and save on Muni." title="Get Clipper and save on Muni" />
</div>
<div class="slider-caption">
<div class="row-fluid">
<div class="span6 offset6">
<div class="slider-caption-inner">
<h2>
New Muni Fare Changes
</h2>
<p>New Muni fares include single-ride savings for using Clipper and MuniMobile.</p>
Learn more
</div>
</div>
</div>
</div>
</li>
...
</ul>
I tried two different code versions based on the linked Stack Overflow post:
Version 1:
jQuery(document).ready(function() {
"use strict";
jQuery('.slides .views-row .img').wrap(function() {
return jQuery(this).closest('.views-row').find('h2 a').clone().text('');
});
});
Version 2:
jQuery(document).ready(function() {
"use strict";
jQuery('.slides .views-row .img').html(function(i,html) {
return $(this).next('h2').find('a').clone().html( html );
});
});
Neither code works. The images in the list do not become linked. The HTML code remains unchanged. (Tested in Firefox and Chrome on Windows.)
There is no JavaScript error on my browser console. There is a warning against jQuery minimized JavaScript itself "Use of getPreventDefault() is deprecated. Use defaultPrevented instead." but that's already been happening and does not prevent already-existing jQuery code on my site from working.
Any ideas/corrections?
Instead try to use a different way.
When you try to click on image, try to trigger a click event on link as both having a same url.
Related
I have an html which contains many (80) small boxes with some info. All these boxes are displayed in grid.
All these boxes and tags are identical just Text is different inside each block. Each box has lets say 3 values: name, email and mobile number.
I want to swap the position of email and mobile number. It will take so much time to do manually. Is there any way or automatic process or tool by which I can just change one block and it will be applied to all others?
Code of boxes:
<div class="row gutters-40">
<div class="col-12 col-md-4 col-sm-4">
<div class="thumbnail">
<h4 class="service__title">Private limited Registration</h4>
<h2 style="font-weight: bold; color: purple; font-family: sans-serif;"><i class="fa fa-rupee"></i> 7500 Rs</h2>
<h5 class="doctype">Documents Required</h5>
<div class="docs">
<ul>
<li>Aadhar card & Pancard of Directors</li>
<li>Photo of Directors</li>
<li>Address Proof of Directors</li>
<li>Address Proof of Company address</li>
<li>Qualification & occupation of directors</li>
<li>Bank statement of Directors</li>
</ul>
</div><!--docs ends here-->
<div class="price_time">
<p class="service__paragraph" align="left" id="price"><i class="fa fa-info-circle"></i> Know More</p>
</div>
</div><!--Thumbnail ends here-->
</div>
<div class="col-12 col-md-4 col-sm-4">
<div class="thumbnail">
<h4 class="service__title">limited Liability partnership</h4>
<h5 class="doctype">Documents Required</h5>
<div class="docs">
<ul>
<li>Aadhar card of Directors</li>
<li>PAN Card of Directors</li>
<li>Passport size photo of Directors</li>
<li>Residential address proof of Director</li>
<li>Registered Office address proof</li>
<li>Appointment of auditor (ADT-1)</li>
</ul>
</div>
<div class="price_time">
<p class="service__paragraph" align="left" id="price"><i class="fa fa-rupee"></i> 7199</p>
<p class="service__paragraph" align="right" id="days"> <i class="fa fa-clock-o"></i> 10-15 days</p>
</div>
</div><!--Thumbnail ends -->
</div><!--box ends-->
</div> <!--row ends-->
As you can see my price is in last div inside p tag. I want it above h5 tag.
I have almost 80 such boxes. With multicursor and moving line up it will still take time.
I thought find and replace with regex can work but I can't evaluate how to do that. There is div class = docs is between these two elements which I want to swap, so I haven't figured out should such regex look like.
Well, I guess this is somewhat too custom task to find an out-of-box tool, so I'd suggest to write simple one of your own. Here's an outline:
open you page in browser
open dev tools Console, run a script to modify html
open dev tools Elements, copy the modified html bit
substitute the boxes part of html in your page with the modified one
if your html is modified also by some other JS, in step 1. use instead a dedicated html containing just the piece that's of interest.
Now, the script should do the following:
find all the boxes (document.querySelectorAll)
for each of them, do the necessary operations with elements, like
const elementToMove = ...
const destinationElement = ...
destinationElement.appendChild(elementToMove)
const elementToRemove = ...
elementToRemove.remove()
I have a website that i am trying to personalize and I am trying to use the AnimatedModal.js framework. I have been able to display some content in one modal, but when it comes to make several modal it gets tricky, because there is just one ID. My question i, how can i use the same ID and change the content for other modals(demo03,demo04..etc.), in order to personalize each.
I will put some code in order to understand the problem
I have been reading the documentation but I am still stuck in this problem.
<!-- single work -->
<div class="col-md-4 col-sm-6 ads graphics">
<a id="demo02" href="#animatedModal" class="portfolio_item">
<img src="img/portfolio/03.jpg" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info">
<span>Should open here </span> <em> ads / Graphics </em>
</div>
</div>
</div>
</a>
</div>
<!-- end single work -->
Then I have the demo where it displays the content of the modal, where it has the #animatedmodal ID
<div id="animatedModal" class="popup-modal ">
<!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID -->
<div id="btn-close-modal" class="close-animatedModal close-popup-modal">
<i class="ion-close-round"></i>
</div>
<div class="clearfix"></div>
<div class="modal-content ">
<div class="container">
<div class="portfolio-padding" >
Hello World
</a>
</div>
</div>
</div>
</div>
this is my Js file where there is just one element assigned to it, to avoid showing the same content into all different classes.
$("#demo02").animatedModal();
I don't think it can be done without hacking the plugin.
As a matter of fact, the script jQuery.animatedModal ALWAYS TARGETS the page element which has id="animatedModal"
You can see the plugin source code here:
https://cdn.jsdelivr.net/npm/animatedmodal#1.0.0/animatedModal.js
...
//Defaults
var settings = $.extend({
modalTarget:'animatedModal',
...
Here is the AnimatedModal reference:
https://joaopereirawd.github.io/animatedModal.js/
At the bottom of the page, I can't see any OPTION regarding how to specify a different target, all options are about styles and animation features.
At this point, I think the only way to allow multiple modals on the same page is to rewrite the plugin, but I'm pretty sure you don't want to choose this way.
i have implemented the great "feature" Slider Pro from this side:
https://github.com/bqworks/slider-pro
Now i want to add "Links" to the description. This is easily possible by just adding the links in the html
Link
Unfortunately this link is not clickable. I think this is caused by the surrounding "area" - a link on this area triggers the slide to load...
is there a way to force links to be clickable?
How can i tell the browser that the link with the class "sp-thumbnail-description" should be always clickable?
Here is the source file:
Js File of SliderPro
My HTML looks like this:
<div id="example5" class="slider-pro">
<div class="sp-slides">
<div class="sp-slide">
<img class="sp-image" src="../src/css/images/blank.gif"
data-src="http://bqworks.com/slider-pro/images/image1_medium.jpg"
data-retina="http://bqworks.com/slider-pro/images/image1_large.jpg"/>
</div>
</div>
<div class="sp-thumbnail">
<div class="sp-thumbnail-image-container">
</div>
<div class="sp-thumbnail-text">
<div class="sp-thumbnail-title">Sie benötigen ein<br />Schadengutachten?</div>
<div class="sp-thumbnail-description"><a class="unbind" href="http://www.google.de">Hier finden Sie Informationen</a></div>
</div>
</div>
</div>
</div>
</div>
I have found this javascript plugin that puts images into a responsive grid which will expand a large view of the image on click (like google images). I want to modify the structure of the large view to display multiple images instead of one large image.
Is there a way I change this code so that the largesrc attribute is not just a link to a single image but an array of images?
html;
<ul id="og-grid" class="og-grid">
<li>
<a href="http://example.com" data-largesrc="img/example.jpg" data-title="Example Title" data-description="Example Description">
<img src="img/example.jpg">
</a>
<div class="og-expander">
<div class="og-expander-inner">
<span class="og-close"></span>
<div class="og-fullimg">
<div class="og-loading"></div>
<img src="img/example.jpg">
</div>
</div>
<div class="og-details">
<h3>Example Heading</h3>
<p>Example Description</p>
Visit website
</div>
</div>
</li>
</ul>
js;
// update preview's content
var $itemEl = this.$item.children('a'),
eldata = {
href: $itemEl.attr('href'),
largesrc: $itemEl.data('largesrc'),
title: $itemEl.data('title'),
description: $itemEl.data('description')
};
I am not sure your plugin will do that or not but looks like there are a couple of lightbox plugin which can do this.
http://css-tricks.com/forums/discussion/12174/lightbox-with-multiple-images/p1
I am trying to use jQuery accordion widget. I want to use a common javascript code inside all the accordion section. For e.g I am trying to make a tab view inside every accordion section. The tab view is handled through an external javascript file created by me. Also I am using images slideshow inside every section of the accordion.It works for the a single section only. Whenever i try to paste the same html code in the next section of the accordion , javascript does not execute. The accordion still works. Waiting for your suggestions.
This is the html code
<div id="contentList"><h3 class="accHead" onclick="initAll('FoodCheck')">Food Check</h3>
<div class="accContent">
<ul class="menuHoriz">
<li>What ? </li>
<li>How ? </li>
<li>Who ? </li>
<li>Screenshots </li>
</ul>
<div id="what" class="content">
<p>
Details about the projects<br /> What. description
</p>
</div>
<div id="how" class="content">
<p>
Details about the projects<br /> How description
</p>
</div>
<div id="who" class="content">
<p>
Details about the projects<br /> Who description
</p>
</div>
<div id="screenshots" class="content">
<p>
<h2>FoodCheck Snapshots</h2>
<img height="468" width="250" src="images/FoodCheck/Screen_1.png" alt="First screen" id="slideshow" />
<div id="imgText"> </div>
<br clear="all" />
<form action="#">
<input type="button" id="prevLink" value="« Previous" />
<input type ="button" id="startAgain" value="Start Again">
<input type="button" id="nextLink" value="Next »" />
</form>
</p>
</div>
</div>
This is one of the section of accordion.
There are 3 more such sections. Each section has a Tabs (with id What, who, how, screenshots) in it which are controlled by an external javascript
In
<script type="text/javascript">
$(function() {
//set up the news accordion on the lower page
$("#contentList").accordion({ header: "h3", collapsible: true});
});
</script>
You will have to subscribe to element events and not use some global javascript functionality. Every acordion view can have various controls but they would need to be distinguished by either class or id attributes to attach to their events.
Some code would help of course. Can you provide some? but only relevant parts so ot won't be overwhelming.