gpEasy CMS javascript hide/show text - javascript

I'm currently working with the gpEasy CMS and I would need to reproduce the hide/show effect that is on this website: http://frontiers.epfl.ch/index.php/Program (links in the program).
I went to the code source and added the function showAbstract that was already here:
function showAbstract(e){
f = e;
var div;
for(div = e.nextSibling; div.className != "abs"; div = div.nextSibling);
if (div.style.display=="block"){
div.style.display="";
} else {
div.style.display="block";
}
return true;
}
So I added it to my code and used the class="abs" to call it :
Matrix completion ...
<div class="abs"> Recent ubiquity ... </div>
Unfortunately, I just have the text displaying but not the effect expected. Would you have any idea ?
Thanks!

The problem has to do with how you show/hide the <div>. Since you have jQuery, I would do something like this:
<a class="show_abstract">Matrix completion ...</a>
<div class="abs"> Recent ubiquity ... </div>
..
<script type="text/javascript">
$(function(){
$('.show_abstract').click(function() {
$(this).next('div.abs').toggle('slow');
});
});
</script>

Related

How to add a class to wordpress buttons

I want to add a class to the download button of all the posts of my wordpress site, but without having to do it in each post
I have umami software running, where I track my traffic, I would like to add events every time someone presses the download button
For that event to be registered, I must add the class "umami--click--download-button" to each button.
I have already tried in many ways but nothing seems to work
the last thing i did was add the following script but it doesn't work either
<script>
$( "div" ).addClass(function( index, currentClass ) {
var addedClass;
if ( currentClass === "wp-block-button" ) {
addedClass = "umami--click--download-button";
}
return addedClass;
});
</script>
In the element inspector the button appears as follows
<div class="wp-block-button has-custom-font-size has-large-font-size">
<a class="wp-block-button__link has-white-color
has-vivid-cyan-blue-to-vivid-purple-gradient-background
has-text-color has-background wp-element-button" href="https://earnlink.click/"
style="border-radius:10px" target="_blank"
rel="noreferrer noopener">DOWNLOAD</a></div>
Thank you very much in advance to whoever answers
Here is the correct code. Try this and let me know if it works fine or not. If you see any error in console please provide the error message for debugging
<script>
(function ($) {
$('div.wp-block-button .wp-block-button__link').each(function () {
const classToAdd = 'umami--click--download-button';
const button = $(this);
if (!button.hasClass(classToAdd)) {
button.addClass(classToAdd);
}
});
})(jQuery);
</script>
you need to test the entire class list. see example below. This will add the class to the <div> tag not the <a> tag.
$("div").addClass(function(index, currentClass) {
var addedClass;
if (currentClass === "wp-block-button has-custom-font-size has-large-font-size") {
addedClass = "umami--click--download-button";
}
return addedClass;
});
.umami--click--download-button {
color: red;
}
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<div class="wp-block-button has-custom-font-size has-large-font-size">this is a test
<a class="wp-block-button__link has-white-color
has-vivid-cyan-blue-to-vivid-purple-gradient-background
has-text-color has-background wp-element-button" href="https://earnlink.click/" style="border-radius:10px" target="_blank" rel="noreferrer noopener">DOWNLOAD</a></div>
<div class="wp-block-button has-custom-font-size has-large-font-size">this is a test another test</div>
<div class="wp-block-button ">and another</div>

How to capture a new group of selector after loading a div with .load() of Jquery

Currently, my website http://benoitmignault.ca/english/english.html works well on Chrome or Firefox, but on IE the fetch functions doesn't work...
I started to understand Jquery because the .load () function works well on IE because the fetch function doesn't work...
I managed to display each of my links in the "header" section in the div_center section.
When I click on the pictures section, my 5 links are displayed.
When I come to click on one of the 5 pictures it does not display the content in the section «div_photo», but rather the content of the page html is displayed as a new page ...
const listeSections = document.querySelectorAll('.header div a');
function affichageSection(){
$(listeSections).each(function(){
$(this).on('click', function(evt){
evt.preventDefault();
if (evt.target.href === "http://localhost:8080/english/english.html"){
window.location.assign("/english/english.html");
} else if (evt.target.href === "http://localhost:8080/index.html"){
window.location.assign("/index.html");
} else if (evt.target.href === "http://localhost:8080/pageAccueuil/partie_photos_EN.html"){
$(div_Center).load(evt.target.href);
affichageSectionPhoto();
} else {
$(div_Center).load(evt.target.href);
$(div_Photo).append("");
}
});
});
}
This is my function that does not work well and I can not understand where my mistake is, it's been days that I'm going around in circles ...
function affichageSectionPhoto(){
var allListElements = $(".unePassionPhoto a");
$(div_Center).find(allListElements).each(function(){
$(this).on('click', function(e){
e.preventDefault();
$(div_Photo).load(e.target.href);
}
});
});
}
Here is the portion of my code from my index.html page:
<div class="middle">
<div class="header">
<div>Accueil
</div>
<div>Projets
</div>
<div>Photos
</div>
<div>À propos
</div>
<div>English</div>
</div>
<div class="center"></div>
<div class="photo"></div>
</div>
I tried to find the information on https://learn.jquery.com/ but without success or to use the "console.log ()" function
thank you in advance
This is my console.log(div_Center)
My console log

JavaScript Library needed for Showing/Hiding a div panel using JQuery

I have a simple fieldset and div panel, which I want to initially show. If you then click on a button/image or text I then want to hide the div panel. Let's call this "myPanel". Clicking on the button/image or text once more will then show it again. Now I have a solution in JavaScript below, but my question is how can I create a library for this and re-use this instead of writing out the method's for multiple panels. Something similar to this:
var panel = new library.panel("myPanel");
Then all events will be handled and variables defined in the JavaScript library.
Consider the following code:
<fieldset>
<legend>My Panel<a id="MyPanelExpandCollapseButton" class="pull-right" href="javascript:void(0);">[-]</a></legend>
<div id="MyPanel">
Panel Contents goes here
</div>
</fieldset>
<script type="text/javascript">
//This should be inside the JavaScript Library
var myPanelShown = true;
$(document).ready(function () {
$('#MyPanelExpandCollapseButton').click(showHideMyPanel);
if (myPanelShown) {
$('#MyPanel').show();
} else {
$('#MyPanel').hide();
}
});
function showHideMyPanel() {
if (myPanelShown) {
$('#MyPanelExpandCollapseButton').text("[+]");
$('#MyPanel').slideUp();
myPanelShown = false;
} else {
$('#MyPanelExpandCollapseButton').text("[-]");
$('#MyPanel').slideDown();
myPanelShown = true;
}
}
</script>
If you want to make it yours then it is simple, make a function in separate js file :
function showHideBlock(panelId, buttonId){
if($(panelId).css('display') == 'none'){
$(panelId).slideDown('normal');
$(buttonId).text("[+]");
}
else {
$(panelId).slideUp('normal');
$(buttonId).text("[-]");
}
}
Now pass the panel or block id which you want to hide/show and button id which will cause hide/show.
onclick="showHideBlock('#MyPanel', '#MyPanelExpandCollapseButton');"
Try this
create a separate .js file and include it in whichever page you want. however remember to keep the id same :3

How can I get url from java script ad line?

I have one div when I click that div I want to open a child browser.I have the code for child browser but when I click the div it executes the javascript line and I didn't get any url from there.
Please check my code
Div code
<div class="box_padding " onClick="window.open(this.href,'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes);return false;" id="column-c-box-1" >
<script type="text/javascript" src="http://ad.leadboltads.net/show_app_ad.js?section_id=838333320"></script>
</div>
when I tried this nothing happening.
So I have tried one more way to solve this issue
function openwindow(){
w=open("myurl",'windowname','width=600,height=250,scrollbars,resizable,toolbar,status');
with(w.document){
write("<body>");
write("This is a new window");
write("</body>");
}
return false;
}
HTML:
<div class="box_padding "onClick="openwindow();" id="column-c-box-1" >
<script type="text/javascript" src="http://ad.leadboltads.net/show_app_ad.js?section_id=838333320"></script>
</div>
This is also not working.
If you have jquery available you can use this instead of this.href:
$('script').attr('src');
function openwindow(){
w=open($(this).find('script').attr('src'),'windowname','width=600,height=250,scrollbars,resizable,toolbar,status');
with(w.document){
write("<body>");
write("This is a new window");
write("</body>");
}
return false;
}
This seems to work in a preliminary test, native javascript. This would be trivial w/ jquery as a previous poster has shown.
Use the URL as a parameter in the div tag "srcVal".
<div class="box_padding " srcVal="http://ad.leadboltads.net/show_app_ad.js?section_id=838333320" onClick="openwindow()" id="column-c-box-1">click me</div>
or this way:
<div class="box_padding "onClick="openwindow();" id="column-c-box-1" >
<script type="text/javascript" src="http://ad.leadboltads.net/show_app_ad.js?section_id=838333320" id="scriptTag"></script>
</div>
Your function slightly modified:
function openwindow(){
var id = document.getElementById("column-c-box-1").getAttribute("srcVal");
//or
// var scr = document.getElementsByTagName('script');
//var id = scr[0].src; // use scr[scr - 1].src if have multiple scripts
var w=open(id,'windowname','width=600,height=250,scrollbars,resizable,toolbar,status');
with(w.document){
write("<body>");
write("This is a new window");
write("</body>");
}
return false;
}
I used "with" because that is in your original code, but I'd caution against it.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/with?redirectlocale=en-US&redirectslug=JavaScript%2FReference%2FStatements%2Fwith

Showing images conditionally

I've been working on a simple website for a while now. The basic coding and CSS are complete, so I am now looking to expand by adding certain features to the website. As it is a fully functioning website that serves a purpose, the main source of revenue comes from Google AdSense. I am looking for a way to show an image if Adblock is detected and another one if if it not.
The method I've found for detecting whether AdSense is active is shown below:
JS (saved as advertisement.js)
document.write('<div id="TestAdBlock" style="display:none;">an advertisement</div>');
The HTML bit:
<div id="adblockFrame">
<script type="text/javascript" src="js/advertisement.js"></script>
<script type="text/javascript">
if (document.getElementById("TestAdBlock") != undefined)
{
document.write('<strong>ADBlock Plus</strong> NOT detected!');
}
else
{
document.write('<strong>ADBlock Plus</strong> detected!');
}
</script>
</div>
CSS:
#adblockFrame {
visibility: hidden;
}
What I'm asking is that if someone could be kind enough to show me how, instead of displaying text, the JS would show an image in its place. I'm not that good with JS so I'm grateful for any help.
I would create an empty target div :
<div id="adblockDetector"></div>
<script type="text/javascript">
if (document.getElementById("TestAdBlock") != undefined)
{
document.getElementById('adblockDetector').innerHTML="<img src='noadblock.jpg' alt='no adblock' />";
}
else
{
document.getElementById('adblockDetector').innerHTML="<img src='adblock.jpg' alt='Adblock detected!' />";
}
</script>
Assuming you are using jquery, just because you tagged it:
html
<div id="wheretoappend"></div>
js
var whereToAppend = '#wheretoappend';
var myDiv = $('<div/>', {id: 'mydiv'});
($('#adblockFrame').length)
? myDiv.addClass('hasit').appendTo(whereToAppend)
: myDiv.addClass('doesnt').appendTo(whereToAppend);
CSS
.hasit {background: url('hasit.png');}
.doesnt {background: url('doesnt.png');}
Please, don't use the devil document.write!
If you want to add content to your page, use DOM methods or .innerHTML.
If you want to detect AdBlock, just create a global variable in advertisement.js
For example:
advertisement.js:
window.TestAdBlock = true;
Your page:
<div id="adblockFrame">
<img id="TestAdBlock" alt="AdBlock Detected???" />
<script type="text/javascript" src="js/advertisement.js"></script>
<script type="text/javascript">
(function() {
var AdBlockImg = document.getElementById('TestAdBlock');
if (window.TestAdBlock)
{
AdBlockImg.src = "/images/AdBlockDetected.jpg";
AdBlockImg.alt = "AdBlock Detected!";
}
else
{
AdBlockImg.src = "/images/AdBlockNOTDetected.jpg";
AdBlockImg.alt = "AdBlock NOT Detected!";
}
AdBlockImg.title = AdBlockImg.alt;
});
</script>
</div>
Firstly, you shouldn't use document.write for anything. It's just bad practice. But here's generally how I'd do it with jquery, since you tagged it:
<div id="adblockFrame>
<script type="text/javascript" src="js/advertisement.js"></script>
<script type="text/javascript">
var adsAllowed = adsAllowed || false;
var src = adsAllowed ? '/images/myAd.png' : '/images/noAd.png';
$('#ad').attr('src',src);
</script>
<img id="ad"/>
</div>
advertisement.js
var adsAllowed = true;

Categories