Hi I am new to the world of Greasemonkey and JavaScript..
I want to replace every onclick function with a part of its related img src link
the source looks like this:
<div id="playlist_container">
<div id="video_container" onclick="playvid('a1a1a1a1a1',3201)" class="playing">
<div id="thumbnail">
<img src="https://.../thumb/ABCD.jpg">
</div>
<div id="title"></div>
<div id="synopsis">
Vid 1 </div>
</div>
<hr>
<div id="video_container" onclick="playvid('b2b2b2b2bb2',3202)" >
<div id="thumbnail">
<img src="https://.../thumb/EFGH.jpg">
</div>
<div id="title"></div>
<div id="synopsis">
Vid 2 </div>
</div>
i want to replace the onclick 'playvid' a1a1a1a1a1 & b2b2b2b2bb2 & c3c3c3c3c3c3 ... with part of img src link
to become like this:
<div id="playlist_container">
<div id="video_container" onclick="playvid('ABCD',3201)" class="playing">
<div id="thumbnail">
<img src="https://.../thumb/ABCD.jpg">
</div>
<div id="title"></div>
<div id="synopsis">
Vid 1 </div>
</div>
<hr>
<div id="video_container" onclick="playvid('EFGH',3202)" >
<div id="thumbnail">
<img src="https://.../thumb/EFGH.jpg">
</div>
<div id="title"></div>
<div id="synopsis">
Vid 2 </div>
</div>
Here's what i've tried so far:
var els = $("#playlist_container");
var cod = $("div#thumbnail img").prop("src").replace(/(https(.+)\/thumb\/|.jpg)/gi, '');
for(var i=0;i<els.length;i++){
var el = els[i];
el.innerHTML = el.innerHTML.replace(/playvid(.)(.)(\w+)(.)/gi, "playvideo('" + cod +"'");
}
this works for me but the issue is that it puts the first cod 'ABCD' to all the following 'playvid()' functions as shown below:
<div id="playlist_container">
<div id="video_container" onclick="playvid('ABCD',3201)" class="playing">
<div id="thumbnail">
<img src="https://.../thumb/ABCD.jpg">
</div>
<div id="title"></div>
<div id="synopsis">
Vid 1 </div>
</div>
<hr>
<div id="video_container" onclick="playvid('ABCD',3202)" >
<div id="thumbnail">
<img src="https://.../thumb/EFGH.jpg">
</div>
<div id="title"></div>
<div id="synopsis">
Vid 2 </div>
</div>
another issue is when i try $("#video_container") it doesnt work i dont know why, I'm very confused and can't find anything on it
Your html has duplicate ID values which can cause issues when finding the correct element. Try using class if you want to target multiple elements.
This code only gets the first element value
var cod = $("div#thumbnail img").prop("src").replace(/(https(.+)\/thumb\/|.jpg)/gi, '');
Try this code and let me know how it goes
var images = $("div.thumbnail img");
images.each(function(img) {
var name = $(this).prop("src").replace(/(https(.+)\/thumb\/|.jpg)/gi, '');
var container = this.closest("div.video_container");
var evt = $(container).attr("onclick").replace(/playvid(.)(.)(\w+)(.)/gi, "playvideo('" + name +"'");
$(container).attr("onclick", evt);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="playlist_container">
<div class="video_container" onclick="playvid('a1a1a1a1a1',3201)" class="playing">
<div class="thumbnail">
<img src="https://.../thumb/ABCD.jpg">
</div>
<div class="title"></div>
<div class="synopsis">Vid 1</div>
</div>
<hr>
<div class="video_container" onclick="playvid('b2b2b2b2bb2',3202)" >
<div class="thumbnail">
<img src="https://.../thumb/EFGH.jpg">
</div>
<div class="title"></div>
<div class="synopsis">Vid 2</div>
</div>
Related
Here is my HTML and Javascript code, and basically as you can see currently what it does is show/hide a row of 3 images upon button click.
Thing is, that there are another 2 rows just like this one and I need to know how I can change the javascript code to make the show/hide thing work for all of them.
I know it has something to do with looping through an array of buttons, but I have no idea of Javascript.
Here it is :
<style>
.show-tapas{
display: none;
}
.show-tapas.showing{
display: block;
}
</style>
<div class="row">
<div class="col-md-12">
<div class="load-more-button">
Tapas
</div>
</div>
</div>
<div class="row show-tapas">
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_1_1.jpeg" data-lightbox="image-1"><div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="images/menu_tapas_1_0.jpeg">
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_2_1.jpeg" data-lightbox="image-1"><div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="images/menu_tapas_2_0.jpeg">
</div>
</div></div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_3_1.jpeg" data-lightbox="image-1"><div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="images/menu_tapas_3_0.jpeg">
</div>
</div></div>
</a>
</div>
</div>
<script>
var a = document.querySelector('.load-more-button');
var b = document.querySelector('.show-tapas');
a.addEventListener("click",function(e){
e.preventDefault
b.classList.contains("showing") ? b.classList.remove("showing") : b.classList.add("showing");
})
</script>
Thank you very much!!!
In this code I only see one row with the class .show-tapas.
Anyway, you should use querySelectorAll to take every matched items.
var button = document.querySelector('.load-more-button');
var tapas = document.querySelectorAll('.show-tapas');
button.addEventListener("click",function(e){
tapas.forEach(b => $(b).toggle());
})
Pro-tip: If you have JQuery you might consider using $(b).toggle() instead of b.classList.contains("showing") ? b.classList.remove("showing") : b.classList.add("showing");
I have a html layout that looks like this..
<div class="container>
<div class="panel">
<div>
<div>
<div>
<img class="match" src="myimage.jpg">
</div>
</div>
</div>
</div>
<div class="panel">
<div>
<div class="item">
<div class="img_container">
<img class="match">
</div>
</div>
</div>
</div>
</div>
I am trying to modify it so that it looks like this..
<div class="container style="align-items: stretch;">
<div class="panel">
<div>
<div>
<div>
<img class="match" src="myimage.jpg">
</div>
</div>
</div>
</div>
<div class="panel">
<div style="height: 100%;">
<div class="item style="height: 100%;">
<div class="img_container" style="height: 100%;">
<img class="match" src="myimage.jpg">
</div>
</div>
</div>
</div>
</div>
I have looked into CSS selectors but I don't think they will work for me in this instance.
How can I do this using jQuery? I would like it to detect if the container class exists and then apply the CSS to the items.
I guess something like this. Please try it out whether it's working
// if el with container class exists will add align-item css
// $('.container').css('align-items','stretch');
// updated, will only apply 'align-items' on container which contains img with class 'match'
$('img.match').closest('.container').css('align-items','stretch');
// assign div with item class, its div parent, and img_container class with height:100%
$('.item').css('height','100%');
$('.img_container').css('height','100%');
$('.item').closest('div').css('height','100%');
// get the src of the first img el with class "match" and assign it to the 2nd img el with class "match"
var src = $('.match').first().attr('src');
if(src){
$('.match').last().attr('src',src);
}
I need to search through multiple siblings to add a class the next and previous divs. Right now, the class is being added to the next div but only the next div if it's a sibling. Here is my HTML:
jQuery('.next').click(function() {
var newImg = jQuery('.currentimg').next('.thumbnail').css('background-image');
newImg = newImg.replace('url(','').replace(')','').replace(/\"/gi, "");
var oldImg = jQuery('.currentimg');
jQuery(oldImg).next('.thumbnail').addClass('currentimg');
jQuery(oldImg).removeClass('currentimg');
jQuery('.featured-image').html('<img src="'+newImg+'"><div class="button prev"><span><</span><span><</span></div><div class="button next"><span>></span><span>></span></div>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="thumbnail currentimg">1</div>
<div class="thumbnail">2</div>
</div>
<div class="wrap">
<div class="thumbnail">3</div>
<div class="thumbnail">4</div>
</div>
<div class="wrap">
<div class="thumbnail">5</div>
<div class="thumbnail">6</div>
</div>
<div class="wrap">
<div class="thumbnail">7</div>
<div class="thumbnail">8</div>
</div>
<div class="next">next</div>
<div class="previous">prev</div>
Possibly something like this. It should let you find next regardless if they are siblings or not. Added a background color to easy see which one is current.
var allThumbnails = $('.thumbnail');
$('.next').click(function() {
var currentImg = allThumbnails.filter('.currentimg');
var nextIndex = (allThumbnails.index(currentImg) + 1) % allThumbnails.length;
var nextImg = allThumbnails.eq(nextIndex);
var newImg = nextImg.css('background-image').replace('url(', '').replace(')', '').replace(/\"/gi, "");
currentImg.removeClass('currentimg');
nextImg.addClass('currentimg');
$('.featured-image').html('<img src="' + newImg + '"><div class="button prev"><span><</span><span><</span></div><div class="button next"><span>></span><span>></span></div>');
});
.currentimg {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="thumbnail currentimg">1</div>
<div class="thumbnail">2</div>
</div>
<div class="wrap">
<div class="thumbnail">3</div>
<div class="thumbnail">4</div>
</div>
<div class="wrap">
<div class="thumbnail">5</div>
<div class="thumbnail">6</div>
</div>
<div class="wrap">
<div class="thumbnail">7</div>
<div class="thumbnail">8</div>
</div>
<div class="next">next</div>
<div class="previous">prev</div>
I have a set of DIVs that are displayed like a table, but aren't in an HTML table.
The structure is like this:
<div id="queryResult" style="display: block;">
<div class="rRow">
<div class="rCell4">Job</div>
<div class="rCell4">Company</div>
<div class="rCell4">Customer</div>
<div class="rCell4">Product</div>
<div class="rCell4">Balance</div>
</div>
<div class="rRow">
<div class="rCell4 editMe">46549</div>
<div class="hideMe coID">1</div>
<div class="rCell4 coName">Dry Transload</div>
<div class="rCell4">XYZ co</div>
<div class="rCell4">39.100</div>
<div class="rCell4">26.48550</div>
</div>
<div class="rRow">
<div class="rCell4 editMe">46549</div>
<div class="hideMe coID">1</div>
<div class="rCell4 coName">Dry Transload</div>
<div class="rCell4">MNOP co</div>
<div class="rCell4">39.100</div>
<div class="rCell4">26.48550</div>
</div>
<div class="clr"></div>
</div>
When displayed it looks something like this:
So what I want is to be able to sort the columns by clicking on the column header or something. I know there are jQuery/JavaScript libraries out there like sorttable but all the ones I find are expecting a HTML table.
Do I bite the bullet and just switch this over to a table, or is there another reasonable (easier) solution?
Here is a solution. I added some class to your html for more control.
HTML:
<div id="queryResult" style="display: block;">
<div class="rRow header">
<div class="rCell4">Job</div>
<div class="rCell4">Company</div>
<div class="rCell4">Customer</div>
<div class="rCell4">Product</div>
<div class="rCell4">Balance</div>
</div>
<div class="rRow body">
<div class="rCell4 editMe">46549</div>
<div class="hideMe coID">1</div>
<div class="rCell4 coName">VDry Transload</div>
<div class="rCell4">XYZ co</div>
<div class="rCell4">38.100</div>
<div class="rCell4">18.48550</div>
</div>
<div class="rRow body">
<div class="rCell4 editMe">46623</div>
<div class="hideMe coID">1</div>
<div class="rCell4 coName">Dry Transload</div>
<div class="rCell4">MNOP co</div>
<div class="rCell4">31.100</div>
<div class="rCell4">29.48550</div>
</div>
<div class="rRow body">
<div class="rCell4 editMe">46145</div>
<div class="hideMe coID">1</div>
<div class="rCell4 coName">ADry Transload</div>
<div class="rCell4">JKH co</div>
<div class="rCell4">42.100</div>
<div class="rCell4">16.48550</div>
</div>
<div class="clr"></div>
</div>
And here is a jQuery to do sorting:
jQuery:
$('.header').children('.rCell4').each(function(index){
$(this).click(function(){
var container = $('#queryResult');
var header = $('.header');
var cmpCols = [];
$('.body').each(function(){
cmpCols.push($(this).children('.rCell4').eq(index));
});
for(i=0; i<cmpCols.length-1; i++){
for(j=i; j<cmpCols.length; j++){
if(cmpCols[i].text() > cmpCols[j].text()){
var tmp = cmpCols[i];
cmpCols[i] = cmpCols[j];
cmpCols[j] = tmp;
}
}
}
container.html(header);
for(i=0; i<cmpCols.length; i++){
container.append(cmpCols[i].parent());
}
});
});
Working jsFiddle Example.
If you gave each of your <div class="rRow"> elements a unique id, you could reorder them using jQuery .insertAfter();
e.g. for
<div class="rRow" id="row1">
...
</div>
<div class="rRow" id="row2">
...
</div>
you use $('#row1').insertAfter('#row2'); to flip the position of the two rows.
Then you just need a function which will read each value in a particular "column" in response to an onclick event on the header, get the values in that column, sort them, and reorder the rows.
I need some advice with this one:
<div class="container p-rows">
<div class="row">
<div class="col-lg-6">
<p class="ck-edit-col-bodytext">some text</div>
</div>
<div class="col-lg-6">
<p class="ck-edit-col-bodytext">some more more text</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<p class="ck-edit-col-bodytext">some text</div>
</div>
<div class="col-lg-6">
<p class="ck-edit-col-bodytext">some more more text</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<p class="ck-edit-col-bodytext">some text</div>
</div>
<div class="col-lg-6">
<p class="ck-edit-col-bodytext">some more more text</div>
</div>
</div>
<!-- some more rows -->
</div>
each p tag within each row has a different height, depending on how much text is in it. What I want to do is go through each row and detect which p tag has the most height. Then make all other p tags within the row the same height.
My attempt:
var pTagHeight = -1;
jQ('.p-rows .row').each(function() {
pTagHeight = pTagHeight > jQ('.ck-edit-col-bodytext').height() ? pTagHeight : jQ('.ck-edit-col-bodytext').height();
jQ('.ck-edit-col-bodytext').height(pTagHeight);
pTagHeight = -1;
});
but I can't get it to work. Any ideas?
You need to first loop through each row and work out the highest p tag within that row, then apply that height to all the relevant p.
Try this:
jQ('.p-rows .row').each(function() {
var $p = jQ(this).find('p');
var heights = $p.map(function(i, e) { return jQ(e).height(); }).get();
$p.height(Math.max.apply(this, heights));
});