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
Related
I am trying to implement a custom widget plugin for CKEditor5, but am having hard time creating a widget that would prevent link clicks so that user stays on the same page and can edit the component itself.
I've initially started with this structure:
pluginWrapper > contentItemA + contentItemB + contentItemC
but although that mostly worked, balloons for that widget were misaligned. Meaning if I set a link it wrapped properly and link clicks actions were prevented, but the floating bar for link edit was misaligned as pluginWrapper was also positioned to "float: right";
So, I've tried to get some inspiration with a figure as e.g. visible here in the editor demo at the top of the page: https://ckeditor.com/docs/ckeditor5/latest/features/images/images-overview.html
Here, if you set a link it works properly, including the balloons. Apparently because the figure is floating but all content is not. So I tried doing the same. Unfortunately unlike in the official example my link now became clickable when editing, which is far from desirable :(. And I can't prevent that with css to keep the content clickable and editable and my attempts in JS were not successful.
I was somehow hoping it does this automatically, either by the evt.stop() or data.preventDefault() here: https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-link/src/linkediting.js#L267 (definitely looks like it should), but it doesn't seem to like my plugin.
I have also tried doing something like that as part of my plugin, but that made no difference.
Either I am missing something or I am thinking I perhaps set the link up incorrectly. But if I omit that from my plugin and set the link up manually it still behaves this incorrect way :(.
However yes, this may not be the proper way to do this from the code, as I just add these attributes:
attributes: {
linkHref: "https://www.xxx.zz",
target: "_blank"
},
to the pluginWrapper (under pluginTopWrapper > pluginWrapper), and it ends up doing pluginTopWrapper > a > pluginWrapper with the a tag having the proper link, but seems to also ignore the target attribute :/. But I guess me being unable to set the link properly in code still doesn't explain why would the link be clickable when set up manually (using the link button in the editor toolbar) around my widget.
If you have any thoughts on this it would be very much appreciated. Thank you!
I'm working on a new version of my business site at http://bigriverwebdesign.com. I'm trying to implement a Photosphere background (http://photo-sphere-viewer.js.org/). I've contacted the plugin author, but he's been unresponsive and I'd like to see if anyone on StackOverflow has an insight.
I almost have things working the way I want them, but are two hangups I can't figure out.
1) The cursor displays as a grabbed hand. I would like to change it to all-scroll. I don't think this has to do with my implementation because it is the same way on the plugin site. I am unable to change the cursor with CSS and I'm not sure that it is being set with CSS in the first place. Does anyone know why the browser displays things this way and how I might go about overriding it?
2) I can't select text to copy and paste from pages like http://www.bigriverwebdesign.com/services. If I remove the photosphere, I'm able to select text just fine. I'm having trouble finding any information on this.
thank you!
I build a configurator so that visitors can drag and drop things to a specific area on my page. What I now need is a little "helper" which guides the visitor through the process. I thought something like this would be perfect: https://www.cubit-shop.com/en-uk/shelf/configurator
I'm talking about the marker for the "drop area", the arrow and the text "simply drag the modules to the design area".
Obviously this helper should be there if the visitor opens the page and then should disappear when he clicked the first time anywhere.
How could this be done?
Thank you very much in advance.
Edit: One more question: When hovering over an element in the above mentioned example, then it shows a window with additional information. How is this done?
Thanks again
I have previously tried http://introjs.com/ but it depends on what you need it for, since its paid for commercial use.
Alternatively you can try
http://clu3.github.io/bootstro.js/
and
http://heelhook.github.io/chardin.js/
Look around and you will find even more libraries that will help you achieve that, but I think these will do just fine.
I am a newbie with html and i need your support. Please look at my code:
https://fiddle.jshell.net/ghLoau6r/1/
Now I want to make a list of FAQs as table. The requirements are:
when we click to any link button (here we have 2 link buttons as 2 rows of the table), the background must be changed (not pink anymore, but another color)
when we click to any link button, the triangle at the beginning of the row also changes to another form (i created already but my code does not run)
when we click "show info 2", the corresponding "content 2" should be shown, instead of "content 1" now.
please help me, thank you guys very much !
So, not to be rude but there is so many things that need to be fixed here, that I don't have time to share them all with you. I'd strongly recommend picking up a book (HeadFirst HTML & CSS isn't bad, there are plenty others) and getting a solid understanding before continuing the work.
That said, the core problems to your specific question are that first, ID's should be unique (you have two elements with the ID of 'content1'). Second, your second link is looking for content1 still, even though you want content2. A quick fix would be to update the ID of the second content area ,and then update the anchor onclick handler to look for the correct ID.
That said, this is pretty far from an ideal or scalable solution, so please read up.
As commented, I think it will be hard to help without completely writing it for you. But I'd like to at least point out that you should move your JavaScript from inline/in the HTML into a separate JS file.
In your JS Fiddle, take this:
onclick="document.getElementById('content1').style.display=(document.getElementById('content1').style.display=='none')?'block':'none'"
And put it in the "JavaScript" section of JS Fiddle, inside of a $(document).ready() function. Use jQuery to register the onclick event to the behavior you want. Can include jQuery in your fiddle by using a jQuery URI such as https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js
Godpseeed
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