Convert jQuery line to JavaScript - javascript

I have some HTML code which I am using on a popup which contains an image, some text, and a button which closes the popup.
Here is the HTML:
<div id="popupHuawei">
<h2 id="titlePopup">
*Title here*
</h2>
<img class="huaweiPopupImg" src="imgHere">
<div class="popupContentArea">
<div class="popupText">
*Text here*
</div>
</br>
</div>
<a class="lesMer" href="Link">*Link text*
</a>
</div>
And originally, the button I moved, is outside the entire structure I just posted, but I needed it to be inside #popupHuawei, so I used this code to do so:
$(".dy-lb-close").appendTo("#popupHuawei");
How to move this button with vanilla JavaScript instead of jQuery?

Try to use this:
document.querySelector('#popupHuawei').appendChild(document.querySelector('.dy-lb-close')
Here's a link to official documentation of appendChild()

Related

Pop up with on click button

I already made a photo gallery using a plugin which I want to show this gallery when user on_click my homepage button.
I am not sure how to achieve this please help me out here.
This is my button code:
<div class="ow-button-base ow-button-align-center">
<a class="ow-button-hover" target="_blank" id="introduction" onclick="intro_on">
<span>Click me to see gallery</span>
</a>
</div>
This is my photo gallery code:
<div class="huge_it_slideshow_image_wrap_1" style="max-height: 1800px; overflow: visible;">
<div id="huge_it_loading_image_1" class="display" style="display: none;"></div>
$('#introduction span').click(function(){$('#huge_it_loading_image_1').show();});
You could use the jQuery show() function:
$(".huge_it_slideshow_image_wrap_1").show();
but you need to set the display to none in your css file.
You do not need jquery for this simple task.
Input a script tag in the bottom of your document with some javascript code in it.
<script>
function intro_on() {
document.getElementById("huge_it_loading_image_1").style.display = 'block';
};
</script>
You also need to update the onclick in your html to "intro_on()" so it can be executed as a javascript function.

How do I insert a ahref around my mouseover divs - wordpress keeps removing the ahref

on the following site: http://www.strategix.co.za/ on that page you will see the heading OUR SOLUTIONS with the 8 hover over boxes.
what I'm trying to do is to wrap a href around each box so that not only when you hover over does it display the right side div but you can click on the box which takes you to the relevant page.
so in the code:
<div class="left2">
<div class="box2">Microsoft Dynamics ERP</div>
</div>
I try say:
<div class="left2">
<div class="box2">Microsoft Dynamics ERP</div>
</div>
But the minute I save it in wordpress it removes the ahref. I also tried this:
<div class="left2">
<div class="box2"><div>Microsoft Dynamics ERP</div></div>
</div>
But that didnt save either. I just need each seperate whole box to have an href.
Will appreciate some help.
Thanks.
Try
<div class="left2">
<div class="box2" onclick="javascript:window.location.href='link';">Microsoft Dynamics ERP</div>
</div>
Using javascript is one way to apply a link to an entire div.

Hide a parent element based on specific html tag contents

I'm trying to do something similar to How to hide an element, based on its text, with JavaScript? and Hiding a parent element using JS/JQuery based on the alt tag of a child element
but it's a bit more complicated than that. Here's the entire element (a list item containing lots of stuff) I want to hide:
<li>
<div class="wrapper">
<div class="fulllink" data-href="hideme/some/url" data-title="hideme - some more text">
<a href="/some/url" rel="stuff">
</div>
<div id="fullimage" class="theimage">
<img src="/some/url" title="hideme - some more text" alt="thisis/hideme text">
</div>
<div class="captionwrapper">
<div class="caption">
<p>
<a class="" title="" href="hideme/some/url">more text</a>
</p>
</div>
</div>
</div>
</li>
I want to hide this li element based on the specific content "hideme", which appears several times, but as you can see never on its own. It should be hidden as the page loads, so no user action required.
I've tried to come up with a solution based on similar questions on stackoverflow, but so far unsuccessfully.
You can use the html() function to get the html contents of each li and then search if it contains the desired text: "hideme".
$("li").each(function () {
if ($(this).html().indexOf('hideme') > -1) {
$(this).hide();
}
});
Demo

Selecting only one div of entire css class in jQuery

my goal is to show an overlay on a div when that div is hovered on. The normal div is called .circleBase.type1 and the overlay is circleBase.overlay. I have multiple of these divs on my page. When I hover over one .cirlceBase.type1, overlays show on every .circleBase.type1. How do I prevent this?
Here is some code:
HTML
<div class="circleBase type1">
<p class="hidetext">Lorem ipsum</p>
<hr size="10">
<strong class="gray hidetext">gdroel</strong>
</div>
<div class="circleBase overlay">
<p class="date">11/12/14</p>
</div>
and jQuery
$(document).ready(function(){
$('.overlay').hide();
$('.date').hide();
$(".circleBase.type1").mouseenter(function(){
$(".overlay").fadeIn("fast");
$('.date').show();
$('.hidetext').hide();
});
$(".overlay").mouseleave(function(){
$(this).fadeOut("fast");
$('.date').hide();
$('.hidetext').show();
});
});
Use $(this) to get current element reference and do like this:
$(".circleBase.type1").mouseenter(function(){
$(this).next(".overlay").fadeIn("fast");
$(this).next(".overlay").find('.date').show();
$(this).find('.hidetext').hide();
});
and:
$(".overlay").mouseleave(function(){
$(this).fadeOut("fast");
$(this).find('.date').hide();
$(this).prev(".circleBase").find('.hidetext').show();
});
usually when I want to target something specific you just give it an ID.
ID's play better in JavaScript than classes.
If you had a specific container, using the container as your starting point is a good route as well
$('#container').find('.something.type1').doSomething();
This is much more efficient for jquery, because it only searches .something.type1 inside of #container.
Well I'm not sure exactly what you're looking to do, but it looks like you want to replace content in some kind of circle with a hover text, but with a fade. To do that you'll have to add some CSS and it would be best to change your HTML structure too.
The HTML should look like this:
<div class="circleContainer">
<div class="circleBase">
<p>Lorem ipsum</p>
<hr>
<strong class="gray">gdroel</strong>
</div>
<div class="overlay" style="display: none;">
<p class="date">11/12/14</p>
</div>
</div>
so your js can look like this:
$(function(){
$(".circleContainer").mouseenter(function(){
$(this).find(".overlay")
$(this).find('.circleBase').hide();
});
$(".circleContainer").mouseleave(function(){
$(this).find('.circleBase').show();
$(this).find(".overlay").hide();
});
});
Here's a working solution that includes some CSS to make it nice. Try taking it out and running it, you'll see the problems right away.

JQuery slidetoggle

I am currently building a website for an indie game development team I am working with.
Right now I am writing the alpha sign up page and I have created layout which needs to make use of the slideToggle() and fadeToggle() methods, however after a few hours of faffing around in my editor I cannot seem to fathom a solution for the behavior I want.
When the page loads I want the form container to be in its slid up position and when the user clicks on the div I want the form container to animate down.
I have tried to animate the display property from hidden to block and I have also tried to hide the element when the document loads and then re-show it on click, however when I did that I noticed a strange behavior as the div would slide down and then up, which would cause the user to have to press the button again to view the sign-up form.
The code below handles the click event,
<a href="#" >
<div onclick="$('#showForm .inner').fadeToggle({queue:false});$('#showForm').slideToggle();" id="alpha-container" class="alpha-off"></div>
</a>
And this is the div I want to be hidden and re-appear
<div id="formContainer" class="form container">
<div id="showForm" class="outer">
<div class="inner">
<form method="post" action="verify.php">
<table>
<tr>
<td class="intro">
<h1 class="header-orange">Liberico Alpha Application</h1>
<p class="body-text">So you think you have what it takes to brave the battlefield?
</p>
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
I have created a jsfiddle demonstrating how my page currently renders - http://jsfiddle.net/alexmk92/54EUC/ - any pointers would be greatly appreciated.
Firstly, i removed the javascript code from html and added a class "clickable" to the clickable element:
<a class="clickable" href="#" >
<div id="alpha-container" class="alpha-off">CLICK ME FOR ANIMATION</div>
</a>
And then, i've created a custom javascript toggle function with slideDown and up:
$('.clickable').click(function(){
var showFormObj = $('#showForm');
if(showFormObj.hasClass('active')){
showFormObj.removeClass('active');
showFormObj.slideUp();
}else{
showFormObj.addClass('active');
showFormObj.slideDown();
}
});
On the css part i hid the 'showForm' element:
#showForm {display:none;}
Here is the fiddle: http://jsfiddle.net/Karzin/54EUC/2/
If you need to hide the form when page loads. For form container use
display : none
Eg:
http://jsfiddle.net/54EUC/1/

Categories