Firstly, i have almost zero expreience with html or js etc. Please think me as noob :)
I have an offline website (basically images that goes to directions when i click on them), but since there are LOT of images right now, i want to add a search function.
This is my code --> https://jsfiddle.net/v3cjbyq7/
<html>
<head>
<style>
figure.image {
display: inline-block;
margin: 0px;
padding-top: 20px;
padding-bottom: 25px;
padding-right: 24px;
padding-left: 20px;
width:225px;
height:340px;
}
</style>
</head>
<body>
<div class="images">
<figure class="image">
<img src="Assets/x.png" alt="x";>
</figure>
<figure class="image">
<img src="Assets/xx.png" alt="xx";>
</figure>
<figure class="image">
<img src="Assets/xy.png" alt="xy";>
</figure>
<figure class="image">
<img src="Assets/xz.png" alt="xz";>
</figure>
</div>
<script src="random.js"></script>
</body>
</html>
(random.js is just a script that gives random order to images)
I found this topic that gives me almost what i want.
how to implement Search function using Javascript or jquery
This is the code --> http://jsfiddle.net/Mottie/ztaz6/2/
There are 2 problems that i need to solve in this example. First, i want to adapt this code to my site, but things i tried didn't change anything. (honestly, i just tried random things by hoping it will work)
Second, i want to hide the search box. I want to create something that looks like this --> https://youtu.be/aOkirKWrHbU?t=85 (sorry i couldn't find a better example) Like when he write "sni", it only highlights things with "sni" inside. Highlighting is perfect, but hiding it would be ok as well.
okay if i understood your question well you need:
-store your images in a key value structure like a hashmap you can create it by following this JavaScript hashmap equivalent basically something like imagelist[image1] will return image1.
-put an empty div tag in your page and give it an id.
-write a keyboard listener after the ready call and in it's callback(which is the function in the $(document).ready(function(){} thingy) write a function that would first inject the text being inputed by the user in the div tag we created earlier and secondly it would look in your image dictionary(the storage we made earlier) using a search by regex(google it) and return the desired image and you can do whatever you like with it afterwards.
Related
The rollover works on the image itself, changing from one image to another then back again, but the problem is that it the image also changes on each side of the image on rollover where there is blank space.
I know there it can be done better in CSS, but it is a school assignment and must be in javascript. Below is the code in HTML, then what I have for it in CSS
HTML
<script>
imageout=new Image();
imageout.src="Pics/Image1.jpg";
imageover=new Image();
imageover.src="Pics/Image2.jpg";
function image_out(){
document.images['imageout'].src="Pics/Image1.jpg";
}
function image_over(){
document.images['imageout'].src="Pics/Image2.jpg";
}
</script>
<a href="javascript-rollover-image-swap.htm" onmouseover="image_over();"
onmouseout="image_out();"><img src="Pics/Image1.jpg" class="center"
id="imageout" width="400" height="200" alt="JavaScript rollover. Image swap"></a>
CSS
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
If someone can point out my error or if there is a better way to do this (must be javascript), I would certainly appreciate it!
As I have mentioned in the comment, block level elements will cover the entire row, So remove the class center from your anchor tag and If you want to align the items in middle then change your structure of html like below.
<div class="center">
<a href="javascript-rollover-image-swap.htm" onmouseover="image_over();"onmouseout="image_out();">
<img src="https://www.delecta.co.za/wp-content/uploads/sample.jpg" id="imageout" width="400" height="200" alt="JavaScript rollover. Image swap">
</a>
</div>
DEMO
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.
I am looking into setting up a basic website that displays a simple selection criteria (1 drop down box, 2 radio buttons sets) when the submit button is clicked it opens up a pop up window that displays an image whose location is specified by the selection criteria. This image is being updated at random so the pop-up needs to refresh or at least get and display the new image about every minute.
I have set up a simple html site (see below) that displays the image, located on my machine and refreshes every 30 seconds.
<head>
<meta http-equiv="refresh" content="30">
<title>
Real Time Image Display
</title>
<style>
#geo img {
max-width:100%;
max-height:100%;
margin:auto;
display:inline-block;
vertical-align: middle;
background-size: cover;
}
</style>
</head>
<body bgcolor=#00336>
<div id="geo">
<img src="file:///fileLocation/image.png" height="300" width="550" alt="">
</div>
</body>
I don't believe this is the best way to do this nor have I been able to figure out how to accomplish my original mission using this solution since I am unsure how to pass the selection criteria to these simple html sites to point them to the right image.
Any ideas on where I can look or what I can do?
First, you need to add an ID tag to your image:
<img src="file:///fileLocation/image.png" id="imageToChange" height="300" width="550" alt="">
Then you can use JavaScript to change the image, with no need for a refresh:
function changeImage() {
document.getElementById("imageToChange").src = "/newimage.png";
}
That's the basic of it anyway. It should be noted that your image should not be pulled from the local file system, the way you have it now. It needs to be on the server.
Here is an incredibly simple fiddle to show how this works:
https://jsfiddle.net/durbnpoisn/r7fk8ubz/
I am using Django CMS 3.0.3. I've written a cms plugin with 2 CMSPluginBase derived classes, one adds a slider to a placeholder and another one is for adding slides as children to the slider.
In live mode everything works fine, but when I am editing content, I can't use the slider. The reason is that django-cms is decorating the html code with additional elements like this:
<div class="slider">
<div class="cms_plugin cms_plugin-2" style="width: 0px; overflow: hidden; position: absolute; left: 0px; display: block;">
<!-- Slider Item -->
<div class="slider-item"> [MY SLIDER CONTENT] </div>
<!-- /Slider Item -->
</div>
</div>
I got the HTML/CSS/JS from somebody else and I would preferable not use another slider. What options do I have to work around this problem?
Is there a way in django-cms to switch off the wrapping of plugins in "content mode" only, but to have the placeholder <div> included in "structure mode"? That would not be super convenient, but a workaround that I can live with.
Is there something else, I could do? I don't want to touch the slider itself. It might get an update and then I'd have to adjust it to adjust the slider to my needs again.
django-cms is need to wrap your plugin with <div class="cms_plugin cms_plugin-2"> for relation with "structure mode". There are no other variants.
I make an image gallery. I have 9 fields, in each field there is an image (or better, there is a part of image). In total, I have 9 big images and in each of that fields there is a 1/9 of each big image.
When I "hover" one of these nine fields, I need to change the other fields to the rest of this image and see the whole image over all fields.
Okay, this I am able to make with CSS and a little bit of JS, but I am looking for any javascript/jQuery effect, let´s say to change image by image from right top corner to left bottom corner, any fluently change between images.
Example, with 3 images:
HTML:
<img onmouseover="show_image('r');" rel="1" src="" class="r">
<img onmouseover="show_image('r');" rel="1" src="" class="r">
<img onmouseover="show_image('b');" rel="2" src="" class="b">
<img onmouseover="show_image('g');" rel="3" src="" class="g">
<img onmouseover="show_image('b');" rel="2" src="" class="b">
<img onmouseover="show_image('g');" rel="3" src="" class="g">
<img onmouseover="show_image('r');" rel="1" src="" class="r">
<img onmouseover="show_image('b');" rel="2" src="" class="b">
<img onmouseover="show_image('g');" rel="3" src="" class="g">
CSS:
img {float: left; width: 30%; height: 100px; margin: 0 9px 9px 0;}
img:nth-child(3n+3) {margin-right: 0;}
.g {background: #070;}
.b {background: #00f;}
.r {background: #f00;}
JavaScript:
function show_image(id) {
$('img').removeClass().addClass(id).removeAttr('onmouseover');
}
(fiddle)
Do you have any idea how to make the fluent change of images when hover one of them?
In HTML there should be all 27 small images, it´s no problem, I´m looking for the switching effect. You can send links for examples, maybe I only don´t know how to call what I need :-)
Thanks.
Ok, I understand your question now!
You mean, when you hover over on an image, the rest of images get replaced by its remaining parts and whole of the 9 images match up to complete the image?
You need to set these functions!
Try to remove the onmouseover function from the element, and try to use jQuery for that!
Lets start the example!
The example image tag:
<img src="some/source/to_file.png" alt="photo" class="image5" id="red" />
First you need to get the image on which the mouse over event occured, like this:
$('img').mouseover(function () {
var id = $(this).attr('id');
var class = $(this).attr('class');
if(id == 'red') {
if(class == 'image5') {
/* replace all the other images with red one
* here you will check the image's class too, which is the number
* location where it is present at!
*/
}
}
}
After this, you will need to shift the image's back too! For that, use this:
$('img').mouseleave(function () {
// shift the src tag back as
$('.image5').attr('src', 'its/src/to_file5.png');
$('.image7').attr('src', 'its/src/to_file7.png');
$('.image6').attr('src', 'its/src/to_file6.png');
}
And so on.
And yes, you will be needed to keep the images in the browser as downloaded files on the page load and just keep shifting them once the user hover's over!
In your fiddle, all you're doing is adding a classname but you are not removing or reverting it back on mouseleave event; there is no mouseleave event.
You can use the jQuery UI switchClass() method which allows you to animate whole class.
Here is a working code sample using your as basis:
function show_image(id) {
$('img').each(function() {
var className = this.className;
if (className == id)
className = '';
$(this).removeClass().switchClass(className, id, 1000, 'linear').removeAttr('onmouseover');
});
}
Since it's removing one class and add other, if the one you remove and add is the same it won't work hence the need to check and reset.
As for "linear" it's just my personal choice of easing method, choose your own from the full list.
Updated fiddle.