Showing a popup show what's behind - html

When I show a popup, the circle used for decoration show up, I don't know how solve that,
Here's the fiddle :
some code
https://jsfiddle.net/MagikMike/pctb9e0n/
Thanks


Give your circles IDs, in this case I added an ID circle0 and circle1 to both circles -
<div class="overlay" id="popup1"><div class="popup" id="popup"></div></div>
<div class="userMonitoringTarget">
<div class="circle1" id="circle0">
<div class="circle2">
<div class="circle3">
</div>
</div>
<div class="rectangle"></div>
</div>
<span class="dot"></span>
<div class="userMonitoring">
<div>
<span>
Date : 00/00/0000
</span>
<div>
<span>
LOREM IPSUM
</span>
</div>
</div>
<div class="userMonitoringAttachement">
<img src="/image/icon/icn-plus.svg" alt="+"
onclick="show_popup(' . $user->getNum() . ',' . $monitorings->id[$i] . ');return false;">
</div>
</div>
</div>
<div class="userMonitoringTarget">
<div id="circle1" class="circle1">
<div class="circle2">
<div class="circle3">
</div>
</div>
<div class="rectangle"></div>
</div>
<span class="dot"></span>
<div class="userMonitoring">
<div>
<span>
Date : 00/00/0000
</span>
<div>
<span>
LOREM IPSUM
</span>
</div>
</div>
<div class="userMonitoringAttachement">
<img src="/image/icon/icn-plus.svg" alt="+"
onclick="show_popup(' . $user->getNum() . ',' . $monitorings->id[$i] . ');return false;">
</div>
</div>
</div>
In your JS, your circles still showed because you didn't target them and set the visibility to hidden; now that we have IDs associated with the two circles you can properly get and set the visibility when the pop up is shown.
function hide_popup()
{
setTimeout(function()
{
document.getElementById('popup1').style.visibility = "hidden";
document.getElementById('popup1').style.opacity = 0;
document.getElementById('popup').innerHTML = "";
}, 100);
}
function show_popup( user, monitoring )
{
document.getElementById('circle0').style.visibility = "hidden";
document.getElementById('circle1').style.visibility = "hidden";
document.getElementById('popup1').style.visibility = "visible";
document.getElementById('popup1').style.opacity = 1;
}


You need to add a z-index for your popup wrapper like so.
#popup1 {
z-index: 999;
}

Related

Can't access classes inside a react-modal

This is my first time using react and I am sure that code given is probably not using react's best practices but I am just playing around with it to understand it for now, my problem is that I am trying to access the divs and paragraphs inside the modal but document querySelector returns null. Any ideas? Thanks
moreInfo(movie) {
const movieModalImg = document.querySelector(".movieModalImg");
const movieModalTitle = document.querySelector(".movieModalTitle");
const movieModalRunTimeNum = document.querySelector(
".movieModalRunTimeNum"
);
}
render() {
return (
<div>
<div id="modal">
<Modal
isOpen={this.state.setIsOpen}
onRequestClose={this.closeModal.bind(this)}
contentLabel="Example Modal"
>
<a className="closeModalBtn" onClick={this.closeModal} href={"#"}>
×
</a>
<div className="modal-wrapper">
<div>
<img src={moviePoster} className="movieModalImg" alt=""></img>
</div>
<p className="movieModalTitle"></p>
<div className="movieModalRunTime">
<h4>Runtime:</h4>
<p className="movieModalRunTimeNum"></p>
<p>Minutes</p>
</div>
<div className="movieModalProductionCountry">
<h4>Production Countries:</h4>
<p className="movieModalProductionCountries"></p>
</div>
<div className="movieModalVoteCount">
<h4>Vote Count:</h4>
<p className="movieModalVoteCountNum"></p>
</div>
<div className="movieModalRevenew">
<h4>Revenew:</h4>
<p className="movieModalRevenewNum"></p>
<p>$</p>
</div>
<div className="movieModalBudget">
<h4>Budget:</h4>
<p className="movieModalBudgetNum"></p>
<p>$</p>
</div>
</div>
</Modal>
</div>
<a
href="#"
className="movieCoverMoreInfo"
onClick={this.moreInfo.bind(this)}
>
<img className="moreInfoIcon" src={info} alt=""></img>
More Info
</a>
</div>
);
}

Why different language will influence html layout?

Here is my messageboard project, I don't know why the different will influence my css layout...
I just test english,chinese,thai they both work great, but only japanese will destroy my css style..
I use en_US,ja_JP,zh_TW,th_TH php file to change language
When use English
When use japanese
<li class="board_list">
<div class="board_img">
<img class="board_icon" src="./static/icon/board_icon.svg" alt="board icon">
</div>
<div class="board_text">
<div class="board_title">
<span>
<a href="./board.php?board_id=1">
<span>This was just test the title length of board name</span>
</a>
</span>
</div>
<div class="board_info">
<p class="p1">投稿:26</p>
</div>
</div>
<div class="board_latest">
<div class="board_latest_title">
<span>最新の投稿 :</span>
This was just test the title length of board name
</div>
<div class="board_latest_info">
<a href="./member.php?user=1" title="carry0987">
<span>carry0987,</span>
</a>
<span>2018-04-28</span>
</div>
</div>
</li>
<li class="board_list">
<div class="board_img">
<img class="board_icon" src="./static/icon/board_icon.svg" alt="board icon">
</div>
<div class="board_text">
<div class="board_title">
<span>
<a href="./board.php?board_id=2">
<span>Default</span>
</a>
</span>
</div>
<div class="board_info">
<p class="p1">投稿:6</p>
</div>
</div>
<div class="board_latest">
<div class="board_latest_title">
<span>最新の投稿 :</span>
This was just test the title length of board name
</div>
<div class="board_latest_info">
<a href="./member.php?user=2" title="carry0987y">
<span>carry0987y,</span>
</a>
<span>2018-04-28</span>
</div>
</div>
</li>
And this is my css code
.board_list {
border-width: 1px;
border-style: solid;
border-color: #E9E9E9;
}

You should add new div inside .board_list this class and add css property clear:both;
Something like this :
Also read this article : https://www.w3schools.com/cssref/pr_class_clear.asp

How I can take data from a json inside a ng-init in the view

I have a json inside a ng-init where I have some data and I want to grab these data and paint into a template and I compiled with my directive and I don't have idea what I'm doing wrong. I can not paint json data into the template
example:
<li ng-init="product= {"brand":"Nike", "price":"30€", "mainImage":"images/images.jpg"}>
<div class="content-product>
<div class="product">
<p>Nike </p>
<img src="image.jpg" alt="">
<p>30€ </p>
</div>
</div>
</li>
This li is inside a loop in ruby.
Template where I want to paint the data and compile this template when I click on a button that is inside the li:
<script type="text/ng-template" id="quickpreview.html">
<div class="content-preview">
<div class="content-preview-inner">
<span class="full-preview"></span>
<span class="close-preview"></span>
<div class="block block-left left">
<div class="content-tabs">
<dl class="tabs vertical" data-tab>
<dd class="active">Tab 1
</dd>
<dd>Tab 2
</dd>
<dd>Tab 3
</dd>
<dd>Tab 4
</dd>
<dd>Tab 5
</dd>
</dl>
<div class="tabs-content vertical">
<div class="content active" id="panel1">
<div class="content-img">
<div class="main-img">
<img ng-src="{{product.mainImage}}" alt="">
</div>
<div class="thumbnails">
<a class="th" role="button" aria-label="Thumbnail" href="">
<img aria-hidden=true src="" />
</a>
</div>
</div>
</div>
<div class="content" id="panel2">
<p>This is the second panel of the basic tab example. This is the second panel of the basic tab example.</p>
</div>
<div class="content" id="panel3">
<p>This is the third panel of the basic tab example. This is the third panel of the basic tab example.</p>
</div>
<div class="content" id="panel4">
<p>This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.</p>
</div>
<div class="content" id="panel5">
<p>This is the fifth panel of the basic tab example. This is the fourth panel of the basic tab example.</p>
</div>
</div>
</div>
</div>
<div class="block block-right right">
<div class="content-details">
<div class="details">
<h3 class="title-product">{{product.brand}}</h3>
<h2 class="short-desc">{{product.shortname}}</h2>
<div class="block-price">
</div>
</div>
</div>
</div>
</div>
</div>
my directive and controller:
(function() {
'use strict';
var app = angular.module('quickPreview');
app.controller('globalCtrl', function ($scope) {
// var e = angular.element($("[ng-init]"));
// console.log(e);
// $scope.product = e.attr('ng-init');
// console.log($scope.product);
$scope.product = [];
var logSomeStuff = function(){
console.log($scope.product);
}
$scope.$evalAsync(logSomeStuff);
});
}(window, window.angular));
(function (){
"use strict";
var app = angular.module('quickPreview');
app.directive('previewProduct', function ($compile,$templateCache) {
return {
restrict: 'A',
replace: false,
transclude: false,
scope: {
attrData: '=dataOverview'
},
link: function(scope, element, attrs) {
element.bind('click', '.sd-click-preview', function (){
var preview = angular.element($templateCache.get('quickpreview.html'));
var cpreview = $compile(preview);
element.append(preview);
cpreview(scope);
console.log(cpreview(scope))
if (scope.attrData) {
console.log(this, '=> this');
}
});
}
};
});
}(window, window.angular));

You don't need quotes in ng-init statement. You are ending the statement prematurely.
<li ng-init="product= {brand:'Nike', price:'30€', mainImage:'images/images.jpg'}">
<div class="content-product">
<div class=" product ">
<p>{{product.brand}}</p>
<img ng-src="{{product.mainImage}} " alt=" ">
<p>{{product.price}}</p>
</div>
</div>
</li>
Here's a working example:http://plnkr.co/edit/XRyYefxncZuqE5GeA3XG?p=preview

Cycling through divs in bootstrap indefinitely?

I need to loop through 4 divs arranged in a 2x2 way (cycle=highlighting the selected div) indefinitely. I can't think of the j-query required to do this.
<div class="contentwrap-black" id="current-features">
<div id="content" class="container">
<div class="row-fluid">
<div class="span12">
<div class="row-fluid">
<!-- ----------- IPHONE --------- -->
<div class="span4" id="iphone-white">
<img class="iphone-white-img" src="img/iphone-wht-front.png" alt="">
</div>
<!-- ----------- BANNER --------- -->
<div class="span8">
<h1 class="current-features-banner">CURRENT FEATURES</h1>
<div class="row-fluid">
<!-- ----------- LEFT COLUMN --------- -->
<div class="span6" id="">
<div class="row-fluid">
<div class="span12 content" id="">
<h3>Heading-1</h3>
<p> Paragraph-1</p>
</div>
<div class="span12" id="divider">
<hr>
</div>
<div class="span12 content" id="">
<h3>Heading-2</h3>
<p> Content-2</p>
<hr id="line"> <!-- THIS LINE IS HIDDEN UNTIL MOBILE SIZE-->
</div>
</div>
</div>
<!-- ----------- RIGHT COLUMN --------- -->
<div class="span6" id="">
<div class="row-fluid set">
<div class="span12 content" id="">
<h3>heading-3</h3>
<p>paragraph-3
</div>
<div class="span12 trap" id="divider">
<hr>
</div>
<div class="span12 content " id="">
<h3>heading-4</h3>
<p>paragraph-4.</p>
</div>
</div>
</div>
<!-- ----------- END OF COLUMNS --------- -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The 4 divs I want to loop between are the ones containing the class "content", highlighting each div for 2 seconds and then switching to the next one.

I got a fiddle for you: http://jsfiddle.net/tkjzZ/4/
EDIT: I fixed needing the flag classes. You still need to start with one highlighted though.
function changeHighlight()
{
if($(".content.highlight").is(":last"))
{
$(".highlight").removeClass("highlight");
$(".content").first().addClass("highlight");
}
else
{
$(".highlight").removeClass("highlight").next().addClass("highlight");
}
}
$(document).ready(function () {
setInterval(changeHighlight, 2000); //2 sec
});

This does not cover your animation or whatever you want to do, but it shows how to keep it cycling indefinitely
function cycle() {
$(".container .content")
.last()
.detach()
.prependTo(".container");
}
// and in the inverse sense
function cycle() {
$(".container .content")
.first()
.detach()
.appendTo(".container");
}
Example http://jsfiddle.net/XuHQv/
Ok so color cycling it is http://jsfiddle.net/XuHQv/1/
setInterval(function() {
var items = $(".container .content");
var length = items.length;
items.each(function(i, ele) {
if ($(ele).hasClass("color")) {
$(ele).removeClass("color");
if (i < (length-1)) {
$(items[i+1]).addClass("color");
}
else {
$(items[0]).addClass("color");
}
return false;
}
});
}, 1000);

how to solve this css issue?

I am having some css issues...
When you hover over a product from here, you can see 'show now'..
But when you hover over the product from here, you can see 'Addto Cart' and you also see some black background for 'Add To Cart' which I am not understanding..
May I know what still I have to add in CSS..?
here is my code that displays products:
<!-- Product List -->
<div class="pl">
[product.each]
<div class="t1 col3">
<ul class="products ribbon">
<li class="product">
<a href="[product.link]">
<div class="thumbnail">
<img width="150" height="150" src="[product.image direct='1' tag='0']" class="attachment-shop_catalog wp-post-image" alt="[product.name]" title="[product.name]">
<div class="thumb-shadow"></div>
<strong class="below-thumb">[product.name]</strong>
</div>
<span class="price">
<span class="amount">
<?php if ($product->saleprice > 0 && $product->saleprice < $product->price) { ?>
<div class="prc">
<small>
<span style="text-decoration: line-through; color:blue;">[product.currency mode='sign'][product.price]</span>&nbsp&nbsp
<span style="font-weight: bold; color:red;">[product.currency mode='sign'][product.saleprice]</span>
</small>
</div>
<?php } else { ?>
<div class="prc">
<small>
<span style="font-weight: bold; color:blue;">[product.currency mode='sign'][product.price]</span>
</small>
</div>
<?php } ?>
</span>
</span>
</a>
<div class="buttons" style="opacity: 0; visibility: visible; overflow: hidden; height: 41px; ">
SHOP NOW
</div>
</li>
</ul>
</div> <!-- t1 col3 #end -->
[/product.each]
<div class="clearingdiv"> </div>
</div>
<!-- /Product List -->
so, please tell me what am I missing..? you can find CSS code in source code...

They have used a background image.
In your case you need to set a background to .buttons or the anchor in there.
BTW: please stop using inline-stylsheets; use a separate <style> block or an external CSS file instead. That way, your CSS is much easier to read and understand.