I've created a script in which every data fetched from mysql database has maximum 4 Image's name and path. Problem is to view those Images user must click on preview link which shows a <div id='previewdivofimage'> as per the product Id link clicked and blur rest background. That div
should fetch name and path of the images from mysql database and display in that div but when I click on preview link it just display the last added product images and not the particular id linked which was clicked because to fetch mysql data of that particular product I need to go back and call php functions via jquery or ajax. I am not able to understand how can I fetch the product id and its image's name & path of that particular product Id from that div now, because page should not reload again for doing this activity. Since I am not familiar with Ajax have no clue how does it work. This is JSFIDDLE
Jquery script for making div appear
<script>
myBlurFunction = function(state) {
var containerElement = document.getElementById('".$row['product_id']."');
var overlayEle = document.getElementById('previewdivofimage');
if (state) {
overlayEle.style.display = 'block';
} else {
overlayEle.style.display = 'none';
containerElement.setAttribute('class', null);
}
};
</script>
CSS Code
#previewdivofimage
{
position: fixed;
display: none;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background: rgba(0, 0, 0, 0.50);
z-index: 999;
}
#popup
{
position: absolute;
width: 630px;
height: 430px;
background: rgba(0, 0, 0, 0.40);
border: none;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: auto;
}
#popupwindow
{
position: absolute;
width: 600px;
height: 400px;
background: rgb(255,255,255);
border: none;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: auto;
}
#closeblury
{
border:2px solid transparent;
cursor:pointer;
float:right;
width:20px;
height:20px;
text-align:center;
font-weight:bold;
color:black;
text-shadow: 0px 1px 1px #4d4d4d;
}
#nothing
{
border:1px solid transparent;
margin-left:15px;
width:100%;
height:20px;
}
#showcaseboxcontainer
{
height:91%;
margin-left:15px;
margin-right:15px;
-webkit-box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.75);
box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.75);
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
}
#productimg
{
border:1px solid black;
margin-left:5px;
width:150px;
}
#fimg
{
height:100%;
width:100%;
}
Link code
<a style='cursor:pointer;' onClick='myBlurFunction(1);myFunction(".$row['product_id'].")' id='".$row['product_id']."'>
Preview
</a>
Div Code
<div id='previewdivofimage'>
<div id='popup'>
<div id='popupwindow'>
<div id='closeblury' onclick='javascript:myBlurFunction(0);'>
X
</div>
<div id='nothing'>
</div>
<div id='showcaseboxcontainer'>
<div id='productimg'>
<img id='fimg' src='".$row['product_image_name_first']."'>
</div>
</div>
</div>
</div>
</div>
Related
I am trying to get all click over my overlay, and i dont know angular is ignoring him when i click at another element under the overlay.
I created this stackblitz to see if the problem happens in another place, but i had the similar problem.
https://stackblitz.com/edit/angular-ivy-sjkwkc?file=src%2Fapp%2Fapp.component.html
.carta {
width: 50px;
height: 100px;
position: relative;
padding: 5px;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0px 0px 6px 0px rgba(163,161,163,1);
background-color: #fff;
}
.carta:hover {
box-shadow: 0px 0px 8px 0px rgba(163,161,163,1);
border-color: var(--preto);
cursor: pointer;
}
.carta .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height:100%;
}
<div class="mao">
<div class="carta">
<div (click)="selecionaCarta($event, 'test')" class="overlay"></div>
<span class="nome ouro">Here</span>
<span class="naipe"></span>
</div>
</div>
It is because both your overlay and text is positioned absolute. In your case you want the overlay to be on top.
Adding a z-index to your overlay class should fix the issue.
E.g.
.carta .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height:100%;
z-index: 10; // <<< this
}
I am trying to make jquery image map. And detail will appear on hover of each mark/pin? Here is the screen which i want to result like this.
https://catalin.red/dist/uploads/2011/10/image-map-with-css3-jquery-tooltips-demo.html
<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="http://wpnature.com/wp-content/uploads/2016/09/waterfall-waterfalls-green-lake-trees-wallpaper-for-smartphone.jpg" usemap="#image-map">
<map name="image-map">
<area target="" alt="fdgfh" title="fdgfh" href="test.com" coords="379,384,72" shape="circle">
<area target="" alt="anothyer tooltip" title="anothyer tooltip" href="tets2.com" coords="1010,196,86" shape="circle">
</map>
I have tried image map generator but i didn't get actual result so is there any way to make this.
Result should like this:
There is a full walk-through and explanation for this specific example, which can be found here.
See below working code:
$(document).ready(function() {
// set the wrapper width and height to match the img size
$('#wrapper').css({
'width':$('#wrapper img').width(),
'height':$('#wrapper img').height()
})
//tooltip direction
var tooltipDirection;
for (i=0; i<$(".pin").length; i++) {
// set tooltip direction type - up or down
if ($(".pin").eq(i).hasClass('pin-down')) {
tooltipDirection = 'tooltip-down';
} else {
tooltipDirection = 'tooltip-up';
}
// append the tooltip
$("#wrapper").append("\
<div style='left:"+$(".pin").eq(i).data('xpos')+"px;top:"+$(".pin").eq(i).data('ypos')+"px' class='" + tooltipDirection +"'>\
<div class='tooltip'>" + $(".pin").eq(i).html() + "</div>\
</div>\
");
}
// show/hide the tooltip
$('.tooltip-up, .tooltip-down').mouseenter(function(){
$(this).children('.tooltip').fadeIn(100);
}).mouseleave(function(){
$(this).children('.tooltip').fadeOut(100);
})
});
/* Relative positioning*/
#wrapper {
position: relative;
margin: 50px auto 20px auto;
border: 1px solid #fafafa;
box-shadow: 0 3px 3px rgba(0,0,0,.5);
}
/* Hide the original tooltips contents */
.pin {
display: none;
}
/* Begin styling the tooltips and pins */
.tooltip-up, .tooltip-down {
position: absolute;
background: url("https://catalin.red/dist/uploads/2011/10/arrow-up-down.png");
width: 36px;
height: 52px;
}
.tooltip-down {
background-position: 0 -52px;
}
.tooltip {
display: none;
width: 200px;
cursor: help;
text-shadow: 0 1px 0 #fff;
position: absolute;
top: 10px;
left: 50%;
z-index: 999;
margin-left: -115px;
padding:15px;
color: #222;
border-radius: 5px;
box-shadow: 0 3px 0 rgba(0,0,0,.7);
background: #fff1d3;
background: linear-gradient(top, #fff1d3, #ffdb90);
}
.tooltip::after {
content: '';
position: absolute;
top: -10px;
left: 50%;
margin-left: -10px;
border-bottom: 10px solid #fff1d3;
border-left: 10px solid transparent;
border-right :10px solid transparent;
}
.tooltip-down .tooltip {
bottom: 12px;
top: auto;
}
.tooltip-down .tooltip::after {
bottom: -10px;
top: auto;
border-bottom: 0;
border-top: 10px solid #ffdb90;
}
.tooltip h2 {
font: bold 1.3em 'Trebuchet MS', Tahoma, Arial;
margin: 0 0 10px;
}
.tooltip ul {
margin: 0;
padding: 0;
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="wrapper">
<img width="920" height="450" src="https://catalin.red/dist/uploads/2011/10/world-map.jpg" alt="World continents">
<div class="pin pin-down" data-xpos="450" data-ypos="110">
<h2>Europe</h2>
<ul>
<li><b>Area (km²):</b> 10,180,000</li>
<li><b>Population:</b> 731,000,000 </li>
</ul>
</div>
</div>
I have a page where I load 6 blog posts,
and I have a button which loads more blog posts.
One blog post looks like this:
At page load it looks fine, but after I press the Load More button the styling is gone, and it looks like this:
Here is the code I'm using. I use separate div-s for the image, for the title, for the content, and for some reason when the Load More button is pressed and loads the new posts, for the new posts the styling is not ok. Can you please provide me some examples how to arrange divs related to another div? Can I do this without javascript, with pure css ot in this case I need javascript? Thanks!
.loop-entry:hover {
box-shadow: 1px 1px 2px 2px rgba(0,0,0,0.5);
-moz-box-shadow: 1px 1px 2px 2px rgba(0,0,0,0.5);
-webkit-box-shadow: 1px 1px 2px 2px rgba(0,0,0,0.5);
}
.loop-entry-thumbnail {
max-height: 150px;
overflow: hidden;
}
.loop-entry-case-study-thumbnail {
width: 100%;
max-height: 175px;
overflow: hidden;
margin: 0 auto;
}
.loop-entry-title {
max-height: 115px;
padding-bottom: 20px;
}
.loop-entry-excerpt h3{
margin-top: -12px !important;
}
.loop-entry-excerpt h3 span{
margin-top: 28px !important;
}
.loop-entry-excerpt p,
.loop-entry-excerpt h3
{
margin-top: 90px;
color: rgb(119, 119, 119) !important;
font-family: "Oswald" !important;
font-size: 1.1em !important;
font-weight: 700;
line-height: 23.8px;
overflow: hidden;
/* max-height: 150px;*/
}
.page-id-61 .loop-entry-title {
font-weight:bold;
font-size: 30px;
position: absolute;
/*top: 50px;*/
}
.loop-entry-content {
padding: 0px 30px 0 30px;
/*color: #777;*/
box-sizing: border-box;
color: rgb(119, 119, 119);
font-family: "Oswald";
font-size: 15.4px;
font-weight: 700;
line-height: 23.8px;
margin-bottom: 10px;
margin-left: 0px;
margin-right: 0px;
}
.blog-posts img {
height: 175px;
width: 350px;
}
<div class="contact_con blog-posts">
<div class="loop-entry-thumbnail">
<a href="http://staging.princetonpartners.com/marketing-millennials-dont-trust-stereotypes/" title="Marketing to Millennials: Don’t Trust the Stereotypes">
<img src="http://staging.princetonpartners.com/wp-content/uploads/shutterstock_404838631.jpg" alt="Marketing to Millennials: Don’t Trust the Stereotypes" title="Marketing to Millennials: Don’t Trust the Stereotypes" width="100%">
</a>
</div>
<div class="loop-entry-content clr" style="position: relative;">
<header>
<h2 class="loop-entry-title entry-title">
Marketing to Millennials: Don’t Trust ...
</h2>
</header>
<div class="loop-entry-excerpt entry clr" style="/*! top: 73px; *//*! margin-top: 40px; */position: absolute;">
Today’s modern market looks drastically different than it used to, whether it be th...<br>
<span class="home_readmore">Read more</span>
</div>
</div>
</div>
I made an expanding JQuery Search Box yesterday, which works like a charm! But, I am having trouble creating a script that makes it so when the user clicks off the search box, it closes.
This is my JQuery:
function expandSearch(){
$('#search-input').toggleClass('search-input-open');
}
This is my HTML:
<div class="navigation-search ngen-search">
<form class="ngen-search-form form-search" action="search" method="get">
<input type="text" name="q" id="search-input" class="form-search-input" placeholder="Search for games..." dir="ltr">
<span onclick="expandSearch()" class="form-search-submit" value="🔎">🔎</span>
</form>
</div>
And my CSS:
.ngen-search{
padding:0px 0px 0px;
}
.form-search-input{
width:0px;
height:55px;
border: 0;
outline: 0;
font-size:21px;
padding: 0px 0px 0px 0px;
color: #151515;
transition: all 0.5s;
}
.search-input-open{
width:410px !important;
padding: 0px 0px 0px 20px !important;
display: initial !important;
}
.form-search-submit{
display:inline-block;
width:55px;
height:43px;
border: 0;
outline: 0;
background-color:#151515;
font-size:21px;
color: white;
cursor: pointer;
text-align:center;
}
All help is appreciated! Thanks!
Also, please note that I am quite new to JQuery and rarely use it.
You can write a click handler which listens to the click on anywhere in the page and then remove the class like
jQuery(function($) {
$('#search-trigger').click(function() {
$('#search-input').toggleClass('search-input-open');
});
$(document).click(function(e) {
if (!$(e.target).closest('.ngen-search-form').length) {
$('#search-input').removeClass('search-input-open');
}
})
})
.ngen-search {
padding: 0px 0px 0px;
}
.form-search-input {
width: 0px;
height: 55px;
border: 0;
outline: 0;
font-size: 21px;
padding: 0px 0px 0px 0px;
color: #151515;
transition: all 0.5s;
}
.search-input-open {
width: 410px !important;
padding: 0px 0px 0px 20px !important;
display: initial !important;
}
.form-search-submit {
display: inline-block;
width: 55px;
height: 43px;
border: 0;
outline: 0;
background-color: #151515;
font-size: 21px;
color: white;
cursor: pointer;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navigation-search ngen-search">
<form class="ngen-search-form form-search" action="search" method="get">
<input type="text" name="q" id="search-input" class="form-search-input" placeholder="Search for games..." dir="ltr">
<span id="search-trigger" class="form-search-submit" value="🔎">🔎</span>
</form>
</div>
What I am trying to do is when you click on a button that has the class ".option" it will show the div that has the id "#dialog" and then it will add the class .active to the button clicked (there maybe more than one button that shows different dialogues later one) as well as adding the class ".noScroll" to the body. When the dialogue is shown it can be closed by clicking anywhere on the "#dialog" but NOT the ".dialogPage" which is the div that is inside the "#dialog" div. If the dialogue has been closed, the class that has been added to the body and to the button shall be removed.
Here is the button that need to be clicked to show the dialog:
<a class="option" href="edit_account.php">Your Account</a>
The following HTML represents the structure of my Dialog:
<div id="dialog">
<div id="dialogPage" class="dialogPage">
<p>Edit your account here</p>
</div>
</div>
Here is the related CSS:
body {
color: #4A4A4A;
background-color: #F7F7F7;
font-family: 'arial', sans-serif;
font-size: 0.95em;
line-height: 150%;
text-align: center;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
-webkit-overflow-scrolling: touch;
overflow-y: auto;
overflow-x: hidden;
}
#dialog {
display: none;
background-color: rgba(25,30,37,0.95);
width: 100%;
position: fixed;
bottom:0; top: 0; left: 0; right: 0;
margin-top: 70px;
z-index: 900;
overflow-y: auto;
overflow-x: hidden;
}
.dialogPage {
background-color: #F7F7F7;
border: 2px solid #ffffff;
width: 900px; min-width: 900px;
padding: 20px;
margin: 50px auto;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.4);
box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.4);
}
.noScroll {
overflow-y: hidden;
overflow-x: hidden;
}
Here is the JavaScript I am currently using, but please do not built on it as it is wrong I am sure:
$(".option, #dialog").on('click', function() {
$("#dialog").toggle(29);
$("body").toggleClass("noScroll");
if (e.target.id != 'dialogPage' && !$('#dialogPage').find(e.target).length) {
$("#dialog").hide();
}
});
Try the following:
$('.option').click(function(e) {
e.preventDefault();
$('#dialog').show();
$('body').addClass('noScroll');
$(this).addClass('active');
return false;
});
$('#dialog').click(function(e) {
$(this).hide();
$('body').removeClass('noScroll');
$('.option').removeClass('active');
});
$('#dialogPage').click(function(e) {
e.stopPropagation();
});
I didn't see any use of the .active class in your current code, so that is just a guess.
Demo: http://jsfiddle.net/verashn/2Xh7d/