Relative URL to images in another folder accessed inside a JS file [closed] - relative-path

Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 9 years ago.
Improve this question
I have this Wordpress plugin file structure with "myfolder" as the main folder. There is another subfolder inside this main folder named as "resources". Inside this resources folder contains two subfolders: a) JS b.) images
Inside images folder I have one image "myimage.png".
Inside JS file, I have a script named "myscript.js".
I would like to access the image "myimage.png" in images folder inside my javascript file "myscript.js".
I have tried the following but it does not work(does not resolve):
<img src="../images/myimage.png">
<img src="images/myimage.png">
<img src="resources/images/myimage.png">
<img src="../resources/images/myimage.png">
<img src="myfolder/resources/images/myimage.png">
<img src="../myfolder/resources/images/myimage.png">
Of course the absolute URL path works but I want this application to work with other sites so coding the absolute URL path is not a feasible solution.
I know that Wordpress also has this magic function:
$myicons= plugins_url('resources/images/myimage.png', __FILE__ );
But that will work only inside the PHP plugin file and I'm accessing the image inside a JS file. Any ideas how to make this work without rearranging the current file structure? Is there a JS function equivalent of "plugins_url" in Wordpress? Thanks for any tips.

I get the answer here: https://wordpress.stackexchange.com/questions/78521/plugin-relative-url-to-images-in-another-folder-accessed-inside-a-js-file
The trick is to use http://codex.wordpress.org/Function_Reference/wp_localize_script then pass the image path as object and access it in your JS code.

Related

Back button navigation without reload the previous page in vue js [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
i have created 3 pages, first page is navigating to second page and second page is navigating to 3rd page, how ever when i click back button it is navigating to previous page but its not giving last history intead of its reloading the page,
This is normal as the previous component's instance is destroyed. You can console.log in each lifecycle hook to see which hooks are called when a route is entered and exited.
To prevent this behaviour and cache your route's component you can wrap the <router-view> inside <keep-alive>
<keep-alive>
<router-view></router-view>
</keep-alive>
You can even pass include and exclude props on <keep-alive> to manage which component to or not be cached

Duplicate image is created using Vue and laravel

Hello guys I'm new to Vue so I want to know why duplicate image is created for eg:- when I m using inline css after compiling it create one more image in public folder. Note I have image/logo.png in resource/assets/js folder
example code
<template>
<Img src="image/logo.png">
</template>
This example code is located in resource/assets/js . thing is that during compiling image file should be present in resource/assets/js/image/logo.png otherwise it throw error module not present.is there any another alternative for this, eg:- image file present in one common folder so it does not create duplicate image and npm run watch does not throw error.
I think this is due to default webpack config of laravel.
By default, Laravel Mix and Webpack will find example.png, copy it to your public/images folder, and then rewrite the url() within your generated stylesheet.
Detail here

What is the difference between id and tagname? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
An Interviewer asked this question in selenium webdriver
Please let me know the answer of this question
Thanks
Srinu Marri
Tags
are HTML elements, like
<div>, <ul> , <p> , <h1> , etc
Id's
are ATTRIBUTES of tag names. For example:
a <div> tag can be given an id:
<div id='firstdiv' >
or a class name:
<div class="firstdiv">
ID
Identify uniquely HTML elements. Even if you add more than one ID inside a html page, the DOM object will render all elements even with the same ids, but if selected by JavaScript or selenium only will select the first one that is rendered.
E.g:
findElements(By.id("id"), Selenium will return an element with this id attribute that are present immediately after the page loads.
tagname
Works just like class elements. Can identify a element behavior or even a constant markup. The DOM object can handle with multiples elements and even scripts tags.
E.g: findElements(By.tagName("table"), Selenium will return an array of all the tables that are present immediately after the page loads.

Declarative coding or programmatic coding in Dojo Projects? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
In my own experience, I like programmatic coding. To name a few benefits at here:
Better performance: no need to parse.
No switch between html and javascript: no html, everything in code(use css to control layout.)
Easy to dynamically change the content.
Easy to be read and be maintained.
But, it seams a lot of users at here using declarative coding. my question is : what's the benefit to use declarative coding? Which one is dojo gurus' favorite?
Like fransisco said, you can seperate your code easier. I mean, if you instantiate all your widgets in your JavaScript code, your JavaScript will become pretty large and your HTML will usually be small (only contains "container" nodes which you use to place widgets in).
Better performance: I have to agree with you that it indeed lowers the performance since you have to parse your entire page, but you can optimize that by disabling parseOnLoad and by only parsing the DOM nodes you actually need. At the company I work for we did that by placing all Dojo widget markup inside a <div> with a certain classname. Then in our JavaScript code we do something like:
query(".containsDojo").forEach(node) {
parser.parse(node);
});
No switch between HTML and JS: The switch between HTML and JS makes it easier to understand your code and to have a context. For example, if you need to modify widget A by widget B that's placed on a page called C.html. Then it's easy to look for your widget A since you know on what page it is and where it's located (top, bottom, ...). If you put everything in your JavaScript file, you will have a hard time managing your code since you don't know in what context the widget is initialized. You will have to look through your entire JavaScript code because the widget can be initialized at any point in your code.
Easy to dynamically change the content: If you need dynamic content I usually create some kind of widget myself and put the JavaScript logic there so my "main" JavaScript and HTML code still look clean. You can always use the dijit/registry module to change certain things in your content.
Easy to read and be maintained: I totally disagree with that, similar to what I said in my previous paragraph about the switch between HTML and JavaScript. I mean, what's the difference between a dijit/form/TextBox and a normal HTML input-field? Not much, they're both UI items. Yet, if I follow your thoughts I would put the TextBox somewhere in the JavaScript code and the normal HTML input field inside your HTML. The HTML not only provides you a context, but also centralizes all UI elements.

selenium Mosue Over not working if hover property is defined in CSS [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
Selenium is not able to perform mouseOver if Hover property is defined in CSS
You can try yourself on this link using selenium ide
http://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_link_more2
Selenium mouse Over has no effect on this link
please visit this link
According to this question, this is one of those perennial problems Selenium and :hover css
They discuss a couple of solutions, but it looks like the problem is that as Javascript cannot trigger the :hover pseudo class, so Selenium can't either.