At the moment I have a website that grabs the 12 most recent posts from a category, and displays them as a link to their permalink, with the post thumbnail image as the link image.
You can see a working example here: http://mathewhood.com/sitefiles/
What I want to do, is somehow add functionality into my loop that will allow me to make it so that when you click on one of these list elements, it will display the_content(); for each element.
I found this - http://gsgd.co.uk/sandbox/jquery/easing/ Which I think may provide the functionality that I want (ideally jswing in and out), but I am struggling at implementing it! If anyone knows how I could make this happen please answer this and receive your well deserved up-votes!
http://jsfiddle.net/XzJgU/ - Here is my current loop so far, any help will be greatly appreciated!!!!!!!!!
Here is my solution to your problem. I'm giving an example on how to implement jquery Easing.
EDIT
revised my post, please
View revised sample here
Hope it helps.
$('.thumbs').click(function(e){
e.preventDefault();
var contents = $(this).closest('.recentPost').find('.caption').html();
var $container = $('#theContainer').html(contents);
$container.show().animate({height:200}, {duration: 1000, easing: 'jswing'}).animate({height:100}, {duration: 1000, easing: 'easeInOutCirc'});
$container.click(function(){
$container.animate({height:200}, {duration: 1000, easing: 'easeInExpo'})
$container.fadeOut('slow');
$container.html('');
});
});
Something like that should work - http://jsfiddle.net/XzJgU/5/. It renders the content for each post in the loop, hidden by default using CSS. When a post is clicked, it moves its content to #displayed-post, making it visible. When another post is clicked, its moves back to its original container and the new post content is moved there.
I'm not entirely clear on how you want this to work - are you looking for a PHP solution or a JavaScript one or perhaps a mix of the two. I've got two suggestions on how you might make it work. Also, note that the jQuery library you're referring only adds easing options to jQuery - i.e. it only deals with animation and not with the business logic and behaviour of your code.
Using ajax
This should work in this case since you're not making cross-domain requests. Essentially, you'd intercept the click to the link, figure out where it's pointing and then make a GET request to that page. You'd then filter out the appropriate HTML from the response and put it into your page. Something like this:
$('.recentPost a').click(function(){
$.get($(this).attr('href'), function(data){
//make a get request to the page the link linked to
//and extract the blog content div
$("placeholder").html($(data).filter(".blogRight"));
});
return false; //cancel the browser's default action on click to keep user on page
});
where you'd have a <div id="placeholder" /> in your HTML page where you'd like the content to appear.
Using PHP + JavaScript
Instead of fetching the content on demand, you'd generate it when the page loads but keep it hidden. You'd again intercept clicks but this time you'd find and display the appropriate, existing div on the page.
So your generated page would look something like this:
<div id="contentWrap">
<div class="hidden-featured-content" id="content-f12">
<div>Your content here</div>
</div>
<div class="hidden-featured-content" id="content-f11">
<div>Your content here</div>
</div>
<div id="newBanner"></div>
<div class="recentPost">
<img width="204" height="144" src="http://mathewhood.com/sitefiles/wp-content/uploads/2011/08/featured12.png" class="attachment-post-thumbnail wp-post-image" alt="featured12" title="featured12" />
<a href="http://mathewhood.com/sitefiles/?p=35"><div class="caption">
<div class="captionTitle">Hello World 12!</div>
<p></p>
</div></a>
</div>
<div class="recentPost">
<img width="204" height="144" src="http://mathewhood.com/sitefiles/wp-content/uploads/2011/08/featured11.png" class="attachment-post-thumbnail wp-post-image" alt="featured11" title="featured11" />
<a href="http://mathewhood.com/sitefiles/?p=32"><div class="caption">
<div class="captionTitle">Hello World 11!</div>
<p></p>
</div></a>
</div>
...
You could then use something like to toggle the appropriate content
$('.recentPost a').click(function(){
if($(this).attr('id')){
var x = /link-(.*)/.exec($(this).attr('id')); //figure out which content- div to display
$('.displayed').hide().removeClass('displayed'); //hide already displayed content
$('#content-' + x[1]).show().addClass('displayed'); //show content and mark it as displayed
return false;
}
});
There are a number of ways to achieve this. The most efficient would probably be a full ajax solution but that would require a Wordpress plugin and some advanced scripting.
The most straightforward solution would be to add a box for dynamic content, output the content for each post in a hidden DIV under it's permalink/image, then use javascript to move content from the hidden DIVs to the dynamic content box when a permalink is clicked. I've worked up some code at http://jsfiddle.net/HF9Pr/.
Try this:
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
div.panel,p.flip
{
width: 203px;
margin: 0px;
padding-top: 9px;
padding-bottom: 9px;
padding-left: 12px;
padding-right: 12px;
background: #c1e0fb;
border-left: 1px dashed #aaa;
border-right: 1px dashed #aaa;
}
div.panel
{
height: 288px;
display: none;
border-top: 1px dashed #aaa;
}
p.flip
{
border-top: 1px dashed #aaa;
border-bottom: 1px dashed #aaa;
}
</style>
</head>
<body>
<div class="panel">
<b>sclughslru</b>
<br><br>
ertljhvij3p
<br><br>
<b>veuywihtp</b>
<br><br>
ghdjhrntnd
<br><br>
<b>ehv3rtv</b>
<br><br>
vt4k4kb76kb5
<br><br>
<b>edb3jrr3n54</b>
<br><br>
skcehgkheone
</div>
<p class="flip"><img src="https://dl-web.dropbox.com/get/Pictures/Other/up-down.jpg?w=f17ee285" style="width: 12px; height: 10px; margin-right: 10px;" />Information</p>
</body>
Related
How can I unable website preview feature on all of the links in my web page? That is when the user moves the mouse over any link in the page, I want to show a simple pop up window which loads the page in link. I tried doing it on my own with help of Google and stackoverflow. But result got something like this -
(ACTUAL PAGE LINK RENDERING)
How should I fix this? I wanted to have it similar to Google instant preview.
Here is my code - (website links are fetched from web service)
html file
<div class="text-result" *ngIf="Display('all')">
<div *ngFor="let item of items$|async" class="result">
<div class="frame">
<script>
$(".head-link").mouseover(function() {
$(this).children(".tooltip").show();
}).mouseout(function () {
$(this).children(".tooltip").hide();
});
</script>
<div class="title">
<a href="{{item.link}}" class="head-link">{{item.title}}
<iframe id="tooltip" src="{{item.link}}"></iframe>
</a>
</div>
</div>
<div class="link">
<p>{{item.link}}</p>
</div>
<div>
{{item.pubDate|date:'fullDate'}}
</div>
</div>
</div>
css file
.head-link {
color: #069;
cursor: pointer;
}
.tooltip {
display: none;
position: absolute;
border: 1px solid #000;
width: 400px;
height: 400px;
}
I setup a minimal JS fiddle for you, and I believe I resolve the issue.
A summary of my changes is:
Your iframe has an id=tooltip, when you are referencing it as .tooltip, so I changed it to class=tooltip.
Your jQuery script has to appear after the elements on the page that are used by it, so I moved the script tags to the bottom of the class=text-results div.
Two notes:
First, this isn't an Angular 2 problem, you are using Angular 2 in your project, but the problem is with your jQuery code.
Second, you really should avoid using jQuery to solve your problems within an Angular 2 project. Angular 2 has the capability to solve this problem without needing to include jQuery. Mixing jQuery and Angular 2 will result in messy and hard to understand code, you are much better off trying to solve this problem using only Angular 2.
quick question from a complete JS noobie.
On a site, I have an image of a product consisting of basically two parts, then I have a row of small .png thumbnails .colorthumbnail of those separate parts with transparent backgrounds. In the CSS I set it so that when hovering the thumbnails, it enables the .colorzoom class that overlays a big version of the same color option over the original product picture using position: absolute.
HTML:
<div class="coloroptions">
<div class="j210desertsand">
<div class="colorthumbnail">
<a href="javascript:void(0)" id="colorpicker">
<img src="img/products/colors/j210desertsand.png"></a>
<span class="colorzoom"><img src="img/products/colors/j210desertsand.png">
</span></div></div>
<div class="j210platinum">
<div class="colorthumbnail">
<a href="javascript:void(0)" id="colorpicker">
<img src="img/products/colors/j210platinum.png"></a>
<span class="colorzoom"><img src="img/products/colors/j210platinum.png">
</span></div></div>
</div>
The <div class="j210desertsand">classes are simply there so I can easily hide a single color option using CSS and the next colour will line up. The anchor points are there cause after some research I found I should actually make the thumbnails clickable and with a href="javascript:void(0)" they don't actually link anywhere or reload the page.
CSS: (Excuse the mess, I'm inexperienced)
.coloroptions {
width: 60%;
margin-left: 40%;
}
.colorthumbnail {
margin-left: -45%;
}
.colorthumbnail img {
float: left;
max-width: 16%;
padding-right: 5px;
position: relative;
}
.colorthumbnail .colorzoom {
position: absolute;
width: 253%;
margin-top: 6.9%;
display: none;
margin-left: -3.6%;
}
.colorthumbnail:hover .colorzoom {
display: block;
}
Now this appears to work fine, but because there are two different parts I want to give the user the ability to combine color options and obviously you can't hover over two images at once. After some more research I found that I need Javascript to force the :hover state on click. But I'm gonna be honest, I have no idea what I'm doing. This is what I have:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<!-- -----------------------JSQuery------------------------- -->
<script>
$("#colorpicker").click(function() {
$('.colorthumbnail:hover').toggleClass('colorthumbnail:hover .colorzoom');
});
</script>
<!------------------------ JSQuery End -------------------------->
However this does not appear to be working. Did I get the linked script in the <head> right? It did work alright with the 'Hello World' pop-up test. Did I get the classes in the script right? I'm a little stuck and help would be appreciated! Much love for the community.
Try adding your code like this:
$( document ).ready(function() {
$("#colorpicker").click(function() {
$('.colorthumbnail:hover')
.toggleClass('colorthumbnail:hover.colorzoom');
});
});
When trying to use jquery you need to make sure the page is loaded so it can perform dom manipulation.
source: https://api.jquery.com/ready/
Here is a jsFiddle demo: https://jsfiddle.net/Lv571n1w/
If you inspect element you can see it toggle the classes when clicked.
Have some markup
<div class="container">
<aside class="left">
<div class="item"><p>lorem ipsum</p></div>
</aside>
<aside class="right">
<div class="item"></div>
</aside>
</div>
<button>load more</button>
css
aside {
display: inline-block;
width: 40%;
border: 1px solid red;
margin: 2%;
vertical-align: top;
}
.item {
border-bottom: 1px solid black;
}
I need to load some html content from .txt file when clicking button and add that markup inside both aside. In .txt file markup like this
<div class="item"><p>lorem ipsum1</p></div>
<div class="item"><p>lorem ipsum2</p></div>
<div class="item"><p>lorem ipsum3</p></div>
<div class="item"><p>lorem ipsum4</p></div>
I want "drag" and paste first div with class .item to aside.left, second div with class .item in aside.right, third div with class .item in aside.left and so on...
Is there any solution? I don't know how paste .item divs in both columns..
Thanks for any help
Here is JsFiddle DEMO
upd: I'm only use css+html+some jquery, I dont know any things on php or server technology.. but programmer who work with my markup says that I need to demonstrate how content will be added on click.. So I dont know is this my work, or this is programmer need to do.. I need your answer about this..
If that helps, here is LINK you can see site. In bottom you can see arrow, onclick on that there need add content in columns..
P.S. Programmer works with Yii framework.
Since you already seem to know about AJAX (you added the tag), I think you have your answer there.
You can just use AJAX to get any chunk of data from the server and add it to the page.
Since you are working together with a server-side programmer, I think each of you could build their own part independantly.
All you need is an API that you can use, to which you can specify the offset of items to load, so you could call /getitems?offset=12&count=4 to get the next 4 items from item 12.
You can then just make a simple page that returns dummy data. getitems.php can just return the same constant items every time, and all you need to do is add those items at the bottom of your list.
At the same time, the PHP programmer can actually implement that page so it returns the same data. He can make it in such a way that it also works for non-AJAX request, so he can easily test it without needing your front-end code.
First of all i'm new at scripting and need your help. I'm trying to achieve the following:
I have four projects i want to show on my website. These projects are visable by images. When people hover over the image a div called "info" will show the additional information of the project they hover on.
So to be clear, data which will be triggered by hovering goes to the same div "info":
Hover over image 1 -> load information of project 1 to -> div "info"
Hover over image 2 -> load information of project 2 to -> div "info"
etc.
A friend told me to use ajax and xml, is that a good combination?
Thanks for the help
You are right that a good way to load content dynamically on a page is to use Javascript and XML. A great way to get into using JavaScript is to load a library to help you operate on the contents of an HTML page. I definitely recommend JQuery.
I would highly recommend not loading the information from separate files, unless the content is a whole bunch of very large images.
Take look at this video: JQuery for Designers they do some really great videos that helped me understand JQuery when I was first starting. The page that I just linked to has some great techniques for switching content into the same place, and will give you some important UX (user experience) tips as well.
Ajax is the best choice to get the data....
But the variations comes at what type of Data...
if you need values from database JSON would be my choice
or
never mind any data can be smoothly framed
if you dont have too much hand on scripting
Just use Jquery Plugins to retrieve data using simple calls
Fancybox plugin CLICK HERE...
and the GUIDE to how to use
GUIDE TO USE FANCYBOX CLICK HERE.....
Thank you all for the response.
I solved the problem temporarily by using the technique given by Mark, using html and css. But, i think using javascript could make things easier and more organised. My knowledge about scripting is not good enough. I posted my html for others underneath.
I still have the question how to use the id of a image as a parameter for retrieving a specific part of information. For example: i have an image with id=img1 and a xml file containing with sub parameters. So when i hover over the image js gets the id of that image and then loads the specific part of the xml onto the "info"div and not the whole xml. (to answer the question of adam, the data type is just text)
enter code here
<!DOCTYPE html>
<html>
<head>
<style>
div.maincontent{
border: none;
margin:0px;
padding:0px;
}
div.leftcol, div.rightcol {
/*
* Note that the left column and the right column use position fixed
* to make placement of the elements on top easier.
*/
position:fixed;
top:0px;
width:200px;
height: 100%;
background-color: green;
color: white;
}
div.leftcol{
left:0px;
}
div.rightcol{
right:0px;
}
div.middlecontent{
/*
* Note the left and right margin to place the div.
* With this margin you can
*/
margin:0px 200px 0px 200px;
position: absolute;
top:0px;
left:0px;
}
div.square{
float:left;
margin:0px;
width:200px;
height:200px;
border:10px solid black;
background-color: blue;
}
div.left_content, .right_content {
/*
*Initially do not display the div.left_content
*and div.right_content.
*I still set the all the styles here the divs have in common.
*/
margin:0px;
position:fixed;
margin:0px;
top:0px;
width:200px;
height: 100%;
background-color: blue;
color:white;
display: none; /* do not display */
}
div.square:hover > div.left_content {
/*
*When you hover over a square take from the children
*those with div.left_content and display them.
*The left one is displayed on top of the left div.leftcol
*/
left:0px;
display:block;
}
div.square:hover > div.right_content {
/*
*When you hover over a square take from the children
*those with div.right_content and display them.
*The right one is displayed on top of the right div.rightcol
*/
right:0px;
display:block;
}
</style>
</head>
<body>
<div class="maincontent">
<div class="leftcol">
<p>
Hover over the blue divs in the middle
</p>
<p>
This trick uses the > to find children of an element.
The children are only displayed when hovering over the parent element.
Look at the CSS how that is done. for instance for the left div it is
div.square:hover > div.left_content
</p>
<p> something inside the left column</p>
</div>
<div class="rightcol">
<p>something inside the right column</p>
</div>
<div class="middlecontent">
<div class="square">
<!--
this div has two children
a div with class="left_content" and
a div with class="right_content"
-->
<div class="left_content">
<p> first div </p>
<p> something as left content </p>
</div>
<div class="right_content">
<p> first div </p>
<p> something as right content </p>
</div>
</div>
<div class="square">
<div class="left_content">
<p> second div </p>
<p> something as left content </p>
</div>
<div class="right_content">
<p> second div </p>
<p> something as right content </p>
</div>
</div>
<div class="square">
<div class="left_content">
<p> third div </p>
<p> something as left content </p>
</div>
<div class="right_content">
<p> third div </p>
<p> something as right content </p>
</div>
</div>
</div>
</div>
</body>
</html>
Is there a jQuery library or any leads on implementing that photo tagging like in Facebook and Orkut Photo albums?
Thanks
Hmmm, I found that the new version of Img Notes seems to do exactly what you want.
Checkout the Demo. It allows you to easily add tag notes and show them using JQuery. He also depends on the imgAreaSelect jquery plugin for adding notes.
you could try Jcrop or imgAreaSelect.
Not 100% the same behaviour as in Facebook, but with some tweaks, this should e possible.
I didn't find any suitable plugins for this purpose. So I ended up writing myself a small plug-in to mark areas over an image based on the coordinates loaded through an XML file.
The basic code is required is:
<div id="imageholder">
<!-- The main image -->
<img src="<link to image file>" alt="Image">
<!-- The grid tags -->
<div class="gridtag" style="bottom: 100px; left: 106px; height: 41px; width: 41px;"/>
<div class="gridtag" style="bottom: 300px; left: 56px; height: 100px; width: 56px;"/>
<div class="gridtag" ...
</div>
And the basic CSS styling required:
#imageholder{
height:500px;
width:497px;
position:relative;
}
div.gridtag {
border:1px solid #F0F0F0;
display:block;
position:absolute;
z-index:3;
}
In the above the divs with class "gridtags" are added using jQuery through XML or JSON and by binding events on this divs, we can make phototagging similar in Orkut.
PS: This only one side of the phototagging, ie. if we already have the coordinates we can mark on an image and add click events, which is the part actually i wanted. :) You guys has to write code for doing the marking part of the phototagging.
A good and complex example of tag like functionality in facebook is
Talking Pictures, Which is a facebook application.