Jquery image gallery issue in expression engine - javascript

I have a slight problem with a javascript plugin i have integrated into expression engine (EE). I'm not sure whether its a CSS/HTML problem or something being overwritten in EE. I using the plug jqzoom, which i've managed to integrate fine on my static site However on my EE site click here the secondary image is not displaying (none) and is over lapping the primary. Initial set up of this plugin mean't to work like the following click here - you click on the thumbnail the image changes etc... does anyone know what's causing this problem?

in your first link I saw two images are already in a div with a class clearfix. But in the second one there is only one. I think somehow you messed up with the images in the first one. Try to look in the code where you entered the image source in the website you mentioned in first link

Related

ChessboardJs: Javascript Boards Work Only The First Time

Edit: The page code can be found on my page URL. I don't know where the fault might be. Please help.
Problem:
When we click to the chess puzzles page for the first time, they work. However, the boards vanish when we re-click to them from the homepage.
Demo:
This is the home page.
You click on a player's picture and you are taken to this page. Please note that the boards appear in this one.
But you see that link to go back to the puzzle list. You click on that and you land on the home page again.
Now, if you click on any of the players' photo (or even the same player's photo), this is what you get.
From now on, none of the puzzle links would work.
You can check it yourself at chess-puzzle.com.
Few information:
The site used Cloudfare. I tested with Cloudfare (inactive) a few minutes back yet the problem is not resolved.
I validated JS and it seems to be okay.
I have only one CSS file on my own (mycss.css). Other external files came with the piece of software.
I don't know which code to share because I don't know why this might happen. Though I can share any code by editing this question if asked for.
Can anybody please provide an answer to this.
The problem is that you have the attribute async in the scripts (jquery, chessboard) and that means that they do not load in any particular order.
But, the chessboard uses jquery at some points so if the chessboard script loads/runs first it will crash because it does not find jquery.
The script at the bottom will also fail as it might run before jQuery is loaded.
Finally you have included the chessboard script twice in the `head.
The best solution for your case would be to move the scripts at the bottom of the body, right above your inline script and remove the async attribute from them.

Find plugin on a page

On a website, I see some charts with animation. I am sure they have used a plugin to design those charts but which one, I DONT KNOW...
Is there any way to find which plugin or .js file is used ?
I right-clicked on the chart and clicked "Inspect Element" too but no success. Can't seem to find the correct chart or the code that invoked the animations (hover, mouseOver etc)
The theme I am looking at is here
If you look at the chart underneath VISITORS, and hover over any line, it shows some values. I want to know what is triggering the show of these values.
EDIT
Muhammad answered helped me a lot. Here is what I did for someone looking for the answer.
I right-click on the plugin that I wanted to know more about, and looked at the ID and the class of the same.
By the look of it, i could see that some plugin called 'HighCharts' is used. Then I pressed
ctrl+Shift+F
After that the search option was shown to me, which I couldn't notice since it was right in the bottom of the screen.
I entered "High" in the search bar and it showed me the script and the javascript file that was used to call it.
Hope this helps
For checking which plugin they are using for this. Right click and go to inspect Element and then check the parent div class which contain the particular chart of something and after that go to sources next to the network and for the main.js OR custom.js OR app.js You can quickly search by press ctrl+shift+f or simple look into js folder and search for the class that you got from the inspect Element and you will find which function they are using for this class and u will have idea from the function name and you can search for that partical file.
Ex:
This is a simple example I hope you have got the better idea.
Step 1
Step 2
Step 3

How do you get the navbar toggle to work before 768px?

I have been trying to figure this out all day. I am using a theme that a client wanted to use. I have replaced every mentioning of 767px and 768px with 1359px and 1360px (those are when I want the menu to collapse). I have added custom CSS. I can get the button to show up at 1359px, but it will not toggle the navigation.
Basically, the navbar toggle button does not work until I hit 767px. I do not want to know specific code I can use to fix this problem. All I want to know is where this is being set as 767px. How does the website know to change it at 767px when I have changed every mentioning of this number to 1359px. I have gone through every php file, js file, and css file on the server. I am foaming at the mouth. I think I am going to explode. I have checked EVERY solution here and elsewhere on the internet.
Is this something I need to change in javascript, in css, or in php, or in all of them?
I am using WordPress. I am looking for a general solution NOT CODE. As in, where is this being defined. What file do I need to edit in this godforsaken theme to get the menu to toggle at 1359.
Please help before my brains start oozing out of my ears.
Okay well I feel like an idiot..
To anyone else having a similar issue,
CLEAR YOUR BROWSER CACHE.
Upon inspecting in developer tools I realized the site was loading an older version of my bootstrap.min.css file rather than the file I updated with the new breakpoints.
Cleared the cache and everything worked as expected.

Web image gallery - what has been used creating it?

I have met an interesting image gallery transition surfing the web several times and now I'm interested in how such an elegant solution has been made.
Gallery can be found here: http://nullstuff.com/nullfolio/#/portfolio
The desired effect takes place when toggling between 'Everything' and 'Web Design'.
Could it be made purely with CSS?
Based on the app.js source in the page, it's using the jQuery Quicksand plugin.
To create such elegant gallery JQuery can be used.
You can find several JQuery galleries.
Look at this blog, I found http://vandelaydesign.com/blog/web-development/jquery-image-galleries/
I hope it helps.
First of all
It is not possible to add click events in css.
therefore it is javascript
This is known as an image carousel.
I made my own in jquery.
I can give you the source if you want.
Click on the image to see effect and see the url change and press back button.
You will find the previous page loaded with the effect.Moreover the scrollbar(horizontal) hides after poping which i think is made overflow-x:hidden in css.

Issue with IE7 hiding/removing/showing content using jQuery

So I have a bit of script at the bottom of my page //RETAINER CURRENT that is supposed to hide and show content based on what menu item the user selects in the maincontent area. Unfortunately in IE7 all layers are rendered which means the videos in each layer play simultaneous. I tried .detach, .remove, methods and had no luck and when I saved the items to an array and .empty 'd them I still had no success. What noob mistake am I making?
http://jsbin.com/ahuye4/3
I had the same issue. I was using asp.net so the way I was able to solve this was by using updatepanels and handling the hiding/showing in the code behind with Panels.
I'm not sure what fraemwork/language you are using.
However, I think you might need to call into the flash object and pause/stop the flash videos programmatically.

Categories