I'd like to use the ContentFlow Javascript tool to display TEXT and other types of HTML rather than images. The documentation says it's possible but I have yet to discover how it works. Check out my test page which just doesn't load when the content is something other than images. Code from this page follows. Any thoughts?
<Html>
<script language="JavaScript" type="text/javascript" src="contentflow.js"></script>
<div class="ContentFlow">
<div class="loadIndicator"><div class="indicator"></div></div>
<div class="flow">
<div class="item" src="" title="">test content</div>
<img class="item" src="http://jquery.bassistance.de/plugins/thickbox/images/plant4.jpg" title="Your_Image_Title"/>
<img class="item" src="http://www.wired.com/images/article/magazine/1705/st_alphageek_f.jpg" title="Your_Image_Title"/>
<img class="item" src="http://jquery.bassistance.de/plugins/thickbox/images/plant4.jpg" title="Your_Image_Title"/>
<img class="item" src="http://www.wired.com/images/article/magazine/1705/st_alphageek_f.jpg" title="Your_Image_Title"/>
<img class="item" src="http://jquery.bassistance.de/plugins/thickbox/images/plant4.jpg" title="Your_Image_Title"/>
</div>
<div class="globalCaption"></div>
<div class="scrollbar"><div class="slider"><div class="position"></div></div></div>
</div>
I had the same problem. What you have to do is put an inner div inside the ".item" div like this:
<div class="item"><div class="content">Text content to display</div></div>
As a caution, the docs say that the ".item" container itself will be scaled to be a particular size, but the text will NOT be scaled...sometimes leads to funny-looking stuff if you don't watch it carefully.
I think it should be as simple as the following:
<div class="ContentFlow">
<div class="loadIndicator"><div class="indicator"></div></div>
<div class="flow">
<div class="item">test content</div>
<div class="item">test content2</div>
<div class="item">test content3</div>
<div class="item">test content4</div>
<div class="item">
<a href="http://stackoverflow.com">
<span>this is also test content</span>
</a>
</div>
</div>
<div class="globalCaption"></div>
<div class="scrollbar"><div class="slider"><div class="position"></div></div></div>
</div>
Related
I am working on a site which has been created using Angular. On the homepage I have a Service Box that contains icons which redirects us to different pages. Currently when I click on service box icon it displays the service box:
Now Whenever I click outside of it, it does not close. I am not using jQuery in my project. I have seen many answers for AngularJs but none worked.
Here is my code for service-box.component.html:
<button mat-icon-button (click)="opened = !opened">
<mat-icon>apps</mat-icon>
</button>
<div class="box" [class.opened]="opened">
<div class="tip">
<div class="border"></div>
<div class="foreground"></div>
</div>
<div class="services">
<div class="row">
<a href="https://blog.fossasia.org">
<div class="col">
<div class="img">
<img src="assets/images/blog.png" alt="Fossasia">
</div>
<span>Blogs</span>
</div>
</a>
<a href="https://github.com/fossasia/loklak_search">
<div class="col">
<div class="img">
<img src="assets/images/github.png" alt="Fossasia">
</div>
<span>Github</span>
</div>
</a>
<a href="https://github.com/fossasia/loklak_search/issues">
<div class="col">
<div class="img">
<img src="assets/images/bug.png" alt="Fossasia">
</div>
<span>Bug Report</span>
</div>
</a>
</div>
</div>
<hr />
<div class="services">
<div class="row">
<a href="https://fossasia.org/">
<div class="col">
<div class="img">
<img src="assets/images/fossasia_logo_55x22.png" width="55" height="22" alt="Fossasia">
</div>
<span>FOSSASIA</span>
</div>
</a>
<a href="https://phimp.me">
<div class="col">
<div class="img">
<img src="assets/images/phimpme_64x64.png" width="50" height="50" alt="Phimpme">
</div>
<span>Phimpme</span>
</div>
</a>
<a href="https://susper.com/">
<div class="col">
<div class="img">
<img src="assets/images/susper_60x16.png" width="60" height="16" alt="Susper">
</div>
<span>Susper</span>
</div>
</a>
</div>
<div class="row">
<a href="https://chat.susi.ai/">
<div class="col">
<div class="img">
<img src="assets/images/susi_60x12.png" width="60" height="12" alt="Susi.AI">
</div>
<span>Susi.AI</span>
</div>
</a>
<a href="https://pslab.fossasia.org/">
<div class="col">
<div class="img">
<img src="assets/images/pslab_64x68.png" width="50" height="50" alt="PSLab">
</div>
<span>PSLab</span>
</div>
</a>
<a href="https://eventyay.com/">
<div class="col">
<div class="img">
<img src="assets/images/eventyay.png" width="60" height="18" alt="Eventyay">
</div>
<span>Eventyay</span>
</div>
</a>
</div>
</div>
</div>
service-box.component.ts contains only a public variable opened set to false by default.
I have tried to wrap up whole code of service-box.component.html in a div and used (focusout) event like this:
<div id="side-menu" (focusout)="opened=false">
//Rest of code as in service-box.component.html
</div>
But doing this disables the links in service box.
Any suggestion will be of great help.
You seem to be using #angular/material and therewith the CDK. You should try the CDK's Overlay package.
The overlay package provides a way to open floating panels on the screen.
By setting the attribute hasBackdrop, the overlay will create a backdrop element (= everything outside of your component) and with it a backdropClick #Output event, to which you could bind the closing of your "Service Box".
I know it might be a little bit dumm but i am really struggling with simple things like the following problem. Here is an example of the code that i have. The problem will be explained after the code. So here it is:
<div class="wrapper">
<div class="image">
<div class="columns">
<div class="image_item">
<img src="someSource">
</div>
<div class="image_item">
<img src="someSource">
</div>
</div>
</div>
<div class="image">
<div class="columns">
<div class="image_item">
<img src="someSource">
</div>
<div class="image_item">
<img src="someSource">
</div>
<div class="image_item">
<img src="someSource">
</div>
</div>
</div>
</div>
What i would like to do, is to keep every first item (image_item) of every div with the class "image" and remove the rest. Any idea how to achieve that? So far i got this but it removes everything accept the first one on the first div.
$('.first_only .immo_image').not(':first').remove();
I also tried to iterate through each element with the following code:
$('. image').each(function () {
$('.image_item').not(':first').remove();
});
But it does the same with the other example. It removes everything except the first image on the first div.
Any ideas?
Best regards
You can use $(this).find(".image_item:not(:first)").remove(); to remove all except the first image.
$(".image").each(function() {
$(this).find(".image_item:not(:first)").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="image">
<div class="columns">
<div class="image_item">
<img src="someSource">
</div>
<div class="image_item">
<img src="someSource">
</div>
</div>
</div>
<div class="image">
<div class="columns">
<div class="image_item">
<img src="someSource">
</div>
<div class="image_item">
<img src="someSource">
</div>
<div class="image_item">
<img src="someSource">
</div>
</div>
</div>
</div>
For your particular document tree, this should work:
$('.image').each(function () {
$(this).find('.image-item').slice(1).remove();
});
For each .image, find all .image-item inside it and remove all but the first one (in document order).
There's no need to explicitly loop through the .image elements. You can use a single selector incorporating the :nth-child selector (negated with :not) to remove() all the elements you require. Something like this:
$('.image .image_item:not(:nth-child(1))').remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="image">
<div class="columns">
<div class="image_item">
<img src="someSource"> 1-1
</div>
<div class="image_item">
<img src="someSource"> 1-2
</div>
</div>
</div>
<div class="image">
<div class="columns">
<div class="image_item">
<img src="someSource"> 2-1
</div>
<div class="image_item">
<img src="someSource"> 2-2
</div>
<div class="image_item">
<img src="someSource"> 2-3
</div>
</div>
</div>
</div>
I'm trying to show/hide multiple divs at the same time. I'm using anchor tag to achieve this. I want to change content of two separate divs at same time. One div holds iframe and other video description.
So far I've managed to make one of my divs change it's content, but not the other. Is there a way to make content of both divs change when I click on anchor tag ?
My code. HTML:
<div class="container">
<div class="row">
<div class="col-md-6">
<h2 class='text-center'>Left Side</h2>
<ul>
<li><a class='myTag' href="#" rel="one">One</a></li>
<li><a class='myTag' href="#" rel="two">Two</a></li>
<li><a class='myTag' href="#" rel="three">Three</a></li>
</ul>
</div>
<div class="col-md-6">
<h2 class='text-center'>Right Side</h2>
<div id='zero'>
<img src="https://img.clipartfest.com/d28d6e716da993963c5b8b871f944141_the-golden-goose-01-golden-goose-clipart_295-230.jpeg" alt="" />
</div>
<div id='one' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/89_KXT5ztTU">
</iframe>
</div>
<div id='two' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/XlvZdsO5sIg">
</iframe>
</div>
<div id='three' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/uVoc4AzBX70">
</iframe>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<h2>Lower container</h2>
<div id='zero'>
<p>This text needs to change. Video description</p>
</div>
<div id='one' style="display: none">
<p>This is my video description</p>
</div>
</div>
</div>
</div>
JS:
$('.myTag').on('click', function(){
var target = $(this).attr('rel');
$("#"+target).show('slow').siblings("div").hide('slow');
});
Also a followup question can I make this toggleable (I've tried adding toggle() at the end of my line, but it just made everything worse), so when I click on anchor tag again it returns original image ?
Here is the codepen so you can better understand my problem : https://codepen.io/Karadjordje/pen/ybRyyo?editors=1010
The crux of your problem is that IDs must be unique. If you have multiple of the same ID then it will never work as expected. I switched things to classes and it's working as you expected.
$('.myTag').on('click', function(){
var target = $(this).attr('rel');
$("."+target).show('slow').siblings("div").hide('slow');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6">
<h2 class='text-center'>Left Side</h2>
<ul>
<li><a class='myTag' href="#" rel="one">One</a></li>
<li><a class='myTag' href="#" rel="two">Two</a></li>
<li><a class='myTag' href="#" rel="three">Three</a></li>
</ul>
</div>
<div class="col-md-6">
<h2 class='text-center'>Right Side</h2>
<div class='zero'>
<img src="https://img.clipartfest.com/d28d6e716da993963c5b8b871f944141_the-golden-goose-01-golden-goose-clipart_295-230.jpeg" alt="" />
</div>
<div class='one' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/89_KXT5ztTU">
</iframe>
</div>
<div class='two' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/XlvZdsO5sIg">
</iframe>
</div>
<div class='three' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/uVoc4AzBX70">
</iframe>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<h2>Lower container</h2>
<div class='zero'>
<p>This text needs to change. Video description</p>
</div>
<div class='one' style="display: none">
<p>This is my video description</p>
</div>
<div class='two' style="display: none">
<p>Two!</p>
</div>
<div class='three' style="display: none">
<p>Three!</p>
</div>
</div>
</div>
</div>
Instead of having multiple divs for each description, use one div and change the content based on rel value. store the description inside an object and use rel value to get the description.
// store your description in here
// on click the anchor tag get the rel value and display description
// like desc[relvalue]
var desc = {'one': 'no man no cry jimmy sax', 'two': 'Pendulum - hold on', 'three': 'Paul Van Dyk'};
$('.myTag').on('click', function(){
var target = $(this).attr('rel');
$("#"+target).show('slow').siblings("div").hide('slow');
$('#desc p').html(desc[$(this).attr('rel')])
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6">
<h2 class='text-center'>Left Side</h2>
<ul>
<li><a class='myTag' href="#" rel="one">One</a></li>
<li><a class='myTag' href="#" rel="two">Two</a></li>
<li><a class='myTag' href="#" rel="three">Three</a></li>
</ul>
</div>
<div class="col-md-6">
<h2 class='text-center'>Right Side</h2>
<div id='zero'>
<img src="https://img.clipartfest.com/d28d6e716da993963c5b8b871f944141_the-golden-goose-01-golden-goose-clipart_295-230.jpeg" alt="" />
</div>
<div id='one' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/89_KXT5ztTU">
</iframe>
</div>
<div id='two' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/XlvZdsO5sIg">
</iframe>
</div>
<div id='three' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/uVoc4AzBX70">
</iframe>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<h2>Lower container</h2>
<div id='desc'>
<p>This text needs to change. Video description</p>
</div>
</div>
</div>
</div>
Change id to class...
Instead of id="one" put class="one", and in the jquery put:
$('.myTag').on('click', function(){
var target = $(this).attr('rel');
$("."+target).show('slow').siblings("div").hide('slow');
});
I have a horizontal grid consisting of 3 image squares - The action that I am trying to produce is when any grid section is clicked, the user will be anchored down to a slideshow box that is being displayed below the grid. the first bit of HTML that I have pasted below is one grid (there will be 3) - and the section section of HTML is the slideshow section. Since I cant use the same ID tag multiple times in HTML, I believe I will need to use some for of Javascript or jQuery to take the user from the grid on click to the . Could anyone help me figure out how to do that?
<div id="grid-item" class="grid-item grid-item-1">
<div class="grid-project">
<img class="profile-image" src="img/image1.png">
</div>
<div class="grid-overlay">
<div class="project-info">
<a href="#project-link" id="toggle">
<h4 class="project-name">Headline 1</h4>
<p class="project-categories">description 1</p>
</a>
</div>
</div>
</div>
<div id="grid-item" class="grid-item grid-item-2">
<div class="grid-project">
<img class="profile-image" src="img/image.png">
</div>
<div class="grid-overlay">
<div class="project-info">
<a href="#project-link" id="toggle">
<h4 class="project-name">Headline 2</h4>
<p class="project-categories">description 2</p>
</a>
</div>
</div>
</div>
<div id="slideshow" class="slideshow">
<div class="slideshow_inner">
<a name="project-link" class="anchor">
<img src="img/slide_img_1.png">
</div>
</div>
If you're using id="" you can't use same id twice... Each element should have different id name. Change this in the second grid:
<a href="#project-link" id="toggle">
to this:
<a href="#project-link" id="toggle2">
and don't use same id twice...
Also, you have used name="" in the second section of your html, instead of id:
<a name="project-link" class="anchor">
I have a cover flow style carousel with 7 images:
<!-- ===== FLOW ===== -->
<div id="contentFlow" class="ContentFlow">
<!-- should be place before flow so that contained images will be loaded first -->
<div class="flow">
<a class="item" href="javascript:void(0);" id="toggle_value1"><img class="content" src="image1.png"/></a>
<a class="item" href="javascript:void(0);" id="toggle_value2"><img class="content" src="image2.png"/></a>
<a class="item" href="javascript:void(0);" id="toggle_value3"><img class="content" src="image3.png"/></a>
<a class="item" href="javascript:void(0);" id="toggle_value4"><img class="content" src="image4.png"/></a>
<a class="item" href="javascript:void(0);" id="toggle_value5"><img class="content" src="image5.png"/></a>
<a class="item" href="javascript:void(0);" id="toggle_value6"><img class="content" src="image6.png"/></a>
<a class="item" href="javascript:void(0);" id="toggle_value4"><img class="content" src="image7.png"/></a>
</div>
</div>
It utilizes this carousel cover flow: http://jacksasylum.eu/ContentFlow/docu.php
I want to have a separate div completely separate from the carousel that changes with the current content (clicks on each image). Current content being the one in the middle that is the biggest (see website referenced above). The following would be the divs that show up and disappear according to which item is active in the carousel.
<div id="div1" style="display:none;"></div>
<div id="div2" style="display:none;"></div>
<div id="div3" style="display:none;"></div>
Need help with conceptualizing how I would do this.
One place to start is to put your divs (div1, div2, div3) inside a div with the class caption. contentflow shows the unique caption with each active item, so the caption with your divs will change on each change in the active item ( no need to display:none):
<div class="item"> <img class="content" src="someImageFile.jpg"/>
<div class="caption">
<div id="div1">Content1</div>
<div id="div2">Content2</div>
<div id="div3">Content3</div>
</div> </div>