I have used a Masonry view plugin but when the images load through the ajax call, they seem to be displayed one below another (like a list)
HTML
<div id="masonryView" data-ng-repeat="image in images">
<div class="item">
<a target="_blank" href="">
<img src="{{image.imageSourceURL}}" alt="" width="250">
</a>
<div class="desc">{image.description}</div>
</div>
</div>
Ajax
$(window).load(function(){
var $container = $('#masonryView').masonry();
$container.imagesLoaded( function() {
$container.masonry();
});
});
CSS
#masonryView {
position: relative;
}
.item {
margin: 10px;
width: 100px;
}
Does there seem to be a problem that could explain why the images are displayed one below another?
I'm not seeing any AJAX in your posted code labeled "AJAX" but you should call masonry in this way, by setting your itemSelector:
$(window).load(function(){
var $container = $('#masonryView').masonry();
$container.imagesLoaded( function() {
$container.masonry({itemSelector: '.item'});
});
});
Related
I have many image icon on my page which have Tooltip on it and show different text in tooltip. I want to show each tooltips when user click on its image icon not on hover. and also when user click on any other place or area of page tooltip also hide or disappear.
<img style="width:26px; height: 23px;" class="customTooltip" data-toggle="tooltip" data-html="true" title="" src="/images/alert.png" data-original-title="Number Typ and Service Type:">
You can do it using bootstrap
<b-button id="tooltip-target-1">
Click Me
</b-button>
<b-tooltip target="tooltip-target-1" triggers="click">
I am tooltip <b>component</b> content!
</b-tooltip>
No need to reinvent the wheel. You can use third party library like TippyJs:
tippy(".item", {
trigger: 'click',
content: `item info`,
allowHTML: true,
animation: 'fade',
onShow(instance) {
let element = instance.reference;
instance.setContent(element.getAttribute('data-info'));
//console.log(instance);
},
});
img {
margin: 2rem
}
<script src="https://unpkg.com/#popperjs/core#2"></script>
<script src="https://unpkg.com/tippy.js#6"></script>
<img class='item' src="https://picsum.photos/id/4/150/100" data-info="item info 1">
<img class='item' src="https://picsum.photos/id/2/150/100" data-info="item info 2">
My JQuery solution without any other js libs for custom tooltip:
<script>
$(document).ready(function() {
var noHideTooltip = false;
$(document).click(function(e) {
if (!noHideTooltip) {
$('.tooltip-box-show').removeClass('tooltip-box-show');
}
});
$(document).on('click', '.tooltip-box', function(e) {
$('.tooltip-box-show').removeClass('tooltip-box-show');
$(this).addClass('tooltip-box-show');
noHideTooltip = true;
setTimeout(function() { noHideTooltip = false; }, 0);
});
});
</script>
.tooltip-text {display:none; background:#ccc;}
.tooltip-box-show ~ .tooltip-text {display:block;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/OOjs_UI_icon_alert_destructive.svg/120px-OOjs_UI_icon_alert_destructive.svg.png" class="tooltip-box"><span class="tooltip-text">Text here..</span
Just add your css tooltip style
I'm using the HTML Drag/Drop API W3schools is suggesting (w3schools html drag/drop api)
I'm trying to make something like moving objects from 1 bag to another.
All is working fine so far except when I somehow misclick and drag 1 picture onto the other(instead into free space in the div).
Then the dropped picture is disappearing. When I check the html code, I can see that the dropped img went under the first img.
Probably because of the "child" element in the js code i guess. That is where I need help.
How do I prevent that so I can only drop the images into the divs but not into other images?
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
#div1, #div2 {
float: left;
width: 100px;
height: 350px;
margin: 10px;
padding: 10px;
border: 1px solid black;
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<h2>Drag and Drop</h2>
<p>Drag the image back and forth between the two div elements.</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">Bag1
<img src="https://www.w3schools.com/html/img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">Bag2
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" draggable="true" ondragstart="drag(event)" id="drag2" width="88" height="31">
</div>
</body>
</html>
just found the answer...
change the drop function to:
function drop(ev, el) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
el.appendChild(document.getElementById(data));
}
and when you call the function:
<div id="div1" ondrop="drop(event, this)" ondragover="allowDrop(event)">
thats it. found the answer here: prevent drop inside a child element when drag & dropping with JS
I have a "What's New" page on my website, and I want users to be able to hide and show the post using a button/a href link text. The code has been edited into the post below.
HTML:
<p>Post name</p>
<button class="visi" onclick="toggleVis()">+</button>
<div id="post-container" hidden>
<p class="post-text">Test sample paragraph = srve function private</p>
<img src="error.jpeg" alt="error" style="width:auto;height:200px">
</div>
JavaScript:
function toggleVis() {
var x = document.getElementById("post-container");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
CSS:
.visi {
width:auto;
-webkit-border-radius:10px;
height:auto;
background-color:#79E119;
border:5px solid #FFFFFF;
}
Surround the entire blog post with a <div> element, and use jQuery's .toggle() function to show and hide it when users click on a related link or button.
HTML:
<div id="clickme">
Click here
</div>
<div id="blogpost"><h3>my blog title</h3><p>my blog content</p></div>
Javascript:
$( "#clickme" ).click(function() {
$( "#blogpost" ).toggle( "slow", function() {
// Animation complete.
});
});
I need some help with how to add image placeholders, so when one/or many images are called from the database, they position on top of their placeholder?
I know there is this script I would like to implement http://imsky.github.io/holder/
but how do I ensure that the images called from the database will be displayed over these placeholders?
What code would I need to do this in the html for each image, for example below? pure css would be nice if possible...
<div class="container">
<div class="row">
<div class="col-md-12">
<img src="img1" data-src="" class="img-responsive">
<img src="img2" data-src="" class="img-responsive">
</div>
</div>
</div>
thank you.
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#previewHolder').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#filePhoto").change(function() {
readURL(this);
});
and your HTML should be
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<input type="file" name="filePhoto" value="" id="filePhoto"
class="required borrowerImageFile" data-errormsg="PhotoUploadErrorMsg">
<img id="previewHolder" alt="Uploaded Image Preview Holder" width="250px" height="250px"/>
I'm new to Blogger, and HTML and am trying to set up a fashion-blogging website on Blogger.
I've been successful in making the header image static (that is, doesn't move when scrolling through posts), but unfortunately it isn't aligned at the very top of the website. This makes it look very odd as content disappears as it scrolls under the header image, and reappears briefly as it scrolls between the header image and top of page.
I've looked into some basic HTML, but there is a huge jump from basic HTML to the HTML I see when I try to edit HTML directly on my Blogger website. I just want the header image to be aligned at the very top.
Can anyone help? Anything is appreciated.
Add the css top:0 to the DIV with ID "header-outer"
Plus
Why do you have so much unnecessary markup? You could replace all of this:
<div class="header-outer">
<div class="header-cap-top cap-top">
<div class="cap-left"></div>
<div class="cap-right"></div>
</div>
<div class="fauxborder-left header-fauxborder-left">
<div class="fauxborder-right header-fauxborder-right"></div>
<div class="region-inner header-inner">
<div id="header" class="header section"><div id="Header1" class="widget Header">
<div id="header-inner">
<a style="display: block" href="http://monsemble.blogspot.ca/">
<img width="833px; " height="216px; " style="display: block" src="http://2.bp.blogspot.com/-91QDCMg_EsU/UcsYVdMvLQI/AAAAAAAAACw/Oa727KfuuBk/s1600/header.jpg" id="Header1_headerimg" alt="MONSEMBLE">
</a>
</div>
</div>
</div>
</div>
</div>
<div class="header-cap-bottom cap-bottom">
<div class="cap-left"></div>
<div class="cap-right"></div>
</div>
</div>
With:
<div class="header-outer">
<a style="display: block" href="http://monsemble.blogspot.ca/">
<img width="833px; " height="216px; " style="display: block" src="http://2.bp.blogspot.com/-91QDCMg_EsU/UcsYVdMvLQI/AAAAAAAAACw/Oa727KfuuBk/s1600/header.jpg" id="Header1_headerimg" alt="MONSEMBLE">
</a>
</div>
I faced something similar on my Blogger blog and I noticed that inspite of me switching off the navbar that comes with the Blogger website, in the the HTML code there was still a division on the top of the page for the navbar. I removed it from the template and was able to move the header image to the top of the webpage.
I removed this section of the code -
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'>
<b:includable id='main'><script type="text/javascript">
function setAttributeOnload(object, attribute, val) {
if(window.addEventListener) {
window.addEventListener('load',
function(){ object[attribute] = val; }, false);
} else {
window.attachEvent('onload', function(){ object[attribute] = val; });
}
}
</script>
<div id="navbar-iframe-container"></div>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type="text/javascript">
gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() {
if (gapi.iframes && gapi.iframes.getContext) {
gapi.iframes.getContext().openChild({
url: 'https://www.blogger.com/navbar.g?targetBlogID\0752197236978911214706\46blogName\75MahekMody.com\46publishMode\75PUBLISH_MODE_HOSTED\46navbarType\75DISABLED\46layoutType\75LAYOUTS\46searchRoot\75http://www.mahekmody.com/search\46blogLocale\75en\46v\0752\46homepageUrl\75http://www.mahekmody.com/\46vt\0753008633957882384298',
where: document.getElementById("navbar-iframe-container"),
id: "navbar-iframe"
});
}
});
</script><script type="text/javascript">
(function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '//pagead2.googlesyndication.com/pagead/js/google_top_exp.js';
var head = document.getElementsByTagName('head')[0];
if (head) {
head.appendChild(script);
}})();
</script>
</b:includable>
</b:widget>
</b:section>