Can someone help why I cannot get text to wrap within a listview with ui-block but it works fine outside of the listview? Thanks. Code and screen shot attached.
<ul id="myDetList" data-role="listview" data-inset="true" style="word-wrap:break-word">
<li style="word-wrap:break-word">
<div class="ui-grid-b">
<div class="ui-block-a" style="width:5%; text-align:left; font-weight:bold; font-size:large; color:orange">2</div>
<div class="ui-block-b" style="width:87%; font-size:small; font-weight:bold; word-wrap:break-word">Count the long words in this sentence and tell me how can I wrap these within the ListView.</div>
<div class="ui-block-c" style="width:8%"><i class="fa fa-camera" style="color:gray"></i></div>
<div class="ui-block-a" style="width:5%;"></div>
<div class="ui-block-b" style="width:87%;"></div>
<div class="ui-block-c" style="width:8%"><i class="fa fa-video-camera" style="color:gray"></i></div>
<div class="ui-block-a" style="width:5%;"></div>
<div class="ui-block-b" style="width:87%;"></div>
<div class="ui-block-c" style="width:8%"><i class="fa fa-list-alt" style="color:gray"></i></div>
</div>
</li>
</ul>
<div class="ui-grid-b">
<div class="ui-block-a" style="width:5%; text-align:left; font-weight:bold; font-size:large; color:orange">2</div>
<div class="ui-block-b" style="width:87%; font-size:small; font-weight:bold;">Count the long words in this sentence and tell why does it wrap here and not up there?</div>
<div class="ui-block-c" style="width:8%"><i class="fa fa-camera" style="color:gray"></i></div>
<div class="ui-block-a" style="width:5%;"></div>
<div class="ui-block-b" style="width:87%;"></div>
<div class="ui-block-c" style="width:8%"><i class="fa fa-video-camera" style="color:gray"></i></div>
<div class="ui-block-a" style="width:5%;"></div>
<div class="ui-block-b" style="width:87%;"></div>
<div class="ui-block-c" style="width:8%"><i class="fa fa-list-alt" style="color:gray"></i></div>
</div>
Screen Results in emulator
CSS:
#myDetList>.ui-li-static {
white-space: normal !important;
}
HTML:
<ul id="myDetList" data-role="listview" data-inset="true">
<li>
<div class="ui-grid-b">
<div class="ui-block-a" style="width:5%; text-align:left; font-weight:bold; font-size:large; color:orange">2</div>
<div class="ui-block-b" style="width:87%; font-size:small; font-weight:bold;">Count the long words in this sentence and tell me how can I wrap these within the ListView.</div>
<div class="ui-block-c" style="width:8%"><i class="fa fa-camera" style="color:gray"></i></div>
<div class="ui-block-a" style="width:5%;"></div>
<div class="ui-block-b" style="width:87%;"></div>
<div class="ui-block-c" style="width:8%"><i class="fa fa-video-camera" style="color:gray"></i></div>
<div class="ui-block-a" style="width:5%;"></div>
<div class="ui-block-b" style="width:87%;"></div>
<div class="ui-block-c" style="width:8%"><i class="fa fa-list-alt" style="color:gray"></i></div>
</div>
</li>
</ul>
Related
I am using bootstrap5 to make a navbar with 2 rows that is collapsible when it goes into mobile/smaller window.
Its all working but I don't think its the best way to achieve it and on top of that I have a bug when I forget to toggle it off and resize the window the menu stay.
See this GIF for what it looks like right now:
I had to create a secondary hidden menu in order to show/hide after it collapse past certain screen size, which does not look ideal.
Is there a proper way to achieve this navbar with bootstrap without having all these hacks I had to use or a proper way to achieve it?
With exception to the bug of the menu staying if u don't toggle it off it all looks the way I want it to.
I believe there is a better way to do this, but I am not experienced enough to figure it out by myself.
This is my current code:
<header>
<nav class="navbar navbar-expand-md navbar-dark bg-dark container container flex-column">
<div class="container">
My LOGO HERE
<button id="navbarCollapseBtn" type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-expanded="true">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse show" id="navbarCollapse" style="visibility: hidden;">
<div class="navbar-nav">
Home
Categories
Tags
Contact Us
<i class="fa-solid fa-user"></i> Sign Up
<i class="fa-sharp fa-solid fa-arrow-right-to-bracket"></i> Login
</div>
</div>
<form class="d-flex justify-content-between">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<button type="button" class="btn btn-secondary"><i class="fas fa-search"></i></button>
</div>
</form>
</div>
<div class="navbar-collapse container mt-2 d-none d-md-block">
<div class="navbar-nav">
Home
Categories
Tags
Contact Us
</div>
<div class="navbar-nav">
<i class="fa-solid fa-user"></i> Sign Up
<i class="fa-sharp fa-solid fa-arrow-right-to-bracket"></i> Login
</div>
</div>
</nav>
</header>
I had to further add this javascript to make it all work
$(document).ready(function()
{
$('#navbarCollapseBtn').click(function ()
{
if ($('#navbarCollapse').css('visibility') === 'hidden')
{
$('#navbarCollapse').css('visibility', 'visible', 'important');
$("#navbarCollapse").collapse("show");
}
else
{
$('#navbarCollapse').css('visibility', 'hidden', 'important');
$("#navbarCollapse").collapse("hide");
}
return false;
});
});
Here you go...
.navbar-nav {
width: calc(100vw - 24px);
}
.navbar-brand {
position: absolute;
top: calc(0px + 8px);
padding: 8px;
}
#media screen and (max-width: 767px) {
.navbar-brand {
position: relative;
top: 0;
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<nav class="navbar navbar-light navbar-expand-md">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar">
<span class="visually-hidden">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbar" class="collapse navbar-collapse">
<div class="row ms-auto">
<div class="col-12 ps-0">
<ul class="navbar-nav float-none float-md-end d-flex justify-content-start">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Categories</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tags</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa-solid fa-user"></i> Sign Up
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa-sharp fa-solid fa-arrow-right-to-bracket"></i> Login
</a>
</li>
</ul>
</div>
<div class="col-12 ps-0 order-md-first">
<ul class="navbar-nav d-flex justify-content-end">
<li class="nav-item">
<div class="input-group">
<input type="text" class="form-control" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Search</button>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
EDIT
.navbar-nav {
width: calc(100vw - 24px);
}
.navbar-brand {
position: absolute;
top: calc(0px + 8px);
padding: 8px;
}
.move-right a {
display: inline-block;
}
#media screen and (max-width: 767px) {
.navbar-brand {
position: relative;
top: 0;
}
.move-right a {
display: block;
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<nav class="navbar navbar-light navbar-expand-md">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar">
<span class="visually-hidden">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbar" class="collapse navbar-collapse">
<div class="row ms-auto">
<div class="col-12 ps-0">
<ul class="navbar-nav float-none float-md-end d-flex justify-content-start">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Categories</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tags</a>
</li>
<li class="nav-item ms-md-auto move-right">
<a class="nav-link" href="#">
<i class="fa-solid fa-user"></i> Sign Up
</a>
<a class="nav-link" href="#">
<i class="fa-sharp fa-solid fa-arrow-right-to-bracket"></i> Login
</a>
</li>
</ul>
</div>
<div class="col-12 ps-0 order-md-first">
<ul class="navbar-nav d-flex justify-content-end">
<li class="nav-item">
<div class="input-group">
<input type="text" class="form-control" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Search</button>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
Bootstrap navbar collapse is not working. The issue is that it shows a collapsing menu but on click, it is not collapsed.
I have provided my full code so that it can help you to suggest or help me to sort out the issue
<header class="head-image">
<nav id="nav-top" class="navbar hidden-xs hidden-sm" style="margin-bottom: 0px;">
<div class="container text-center">
<div class="col-md-4 col-md-offset-8">
<div class="search-box">
<?php echo do_shortcode('[smart_search id="1"]'); ?>
</div>
</div>
</div>
</nav>
<section id="main-header">
<div class="container">
<div class="pull-left">
<a href="<?php echo esc_url(home_url('/')); ?>" title="<?php echo esc_attr(get_bloginfo('name', 'display')); ?>" rel="home">
<img src="<?php header_image(); ?>" width="213" height="117" alt="">
</a>
</div>
<div class="pull-right hidden-xs hidden-sm">
<div class="row text-right">
<div class="col-xs-12">
<span class="text-white">Order hotline</span>
</div>
<div class="col-xs-12">
<span class="nav-phone">
<i class="fa fa-phone" aria-hidden="true"></i>
<a class="text-white nav-phone" href="tel:+"></a>
</span>
</div>
</div>
<div class="row n-m hidden-xs hidden-sm">
<div class="col-sm-6 col-xs-12 border-brown relative">
<div class="col-xs-3">
<i class="fa fa-user" aria-hidden="true"></i>
</div>
<div class="col-xs-9">
<div class="row">
Login/Register </div>
<div class="row ">
<span class="text-white">
My Account
</span>
</div>
</div>
</div>
<div class="col-sm-5 col-xs-12 border-brown relative">
<div class="col-xs-3">
<a href="<?php echo wc_get_cart_url(); ?>">
<i class="fa fa-shopping-bag" aria-hidden="true"></i>
</a>
</div>
<div class="col-xs-9">
<div class="row">
Shopping bag
</div>
<div class="row">
<span class="text-white">
<?php echo WC()->cart->get_cart_contents_count(); ?> Items <span class="price">(<?php echo WC()->cart->get_cart_total(); ?>)
</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<nav class="navbar" id="main-menu">
<div class="container">
<div class="navbar-header hidden-md hidden-lg">
<div class="col-xs-6">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="text-white hidden-lg hidden-md" data-toggle="collapse" data-target="#main-menu-collapse">Menu</span>
</div>
<div class="col-xs-6 pull-right border-brown text-center hidden-lg hidden-md relative">
<div class="row">
<div class="col-xs-4">
<i class="fa fa-shopping-bag" aria-hidden="true"></i>
</div>
<div class="col-xs-8 text-white">
<span class="text-white">
<?php echo WC()->cart->get_cart_contents_count(); ?> Items
<span class="text-white">
(<?php echo WC()->cart->get_cart_total(); ?>)
</span>
</span>
</div>
</div>
</div>
</div>
<div id="main-menu-collapse" class="collapse navbar-collapse">
<?php
wp_nav_menu(array(
'theme_location' => 'primary',
'depth' => 2,
'container' => 'div',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
'walker' => new WP_Bootstrap_Navwalker(),
));
?>
<div class="row border-top hidden-lg hidden-md">
<div class="col-xs-3">
Contact
</div>
<div class="col-xs-9">
<a href="tel:">
<i class="fa fa-phone" aria-hidden="true"></i>
<span class="text-white"></span>
</a>
</div>
</div>
<div class="row border-top hidden-lg hidden-md">
<div class="col-xs-3">
Login/ register
</div>
<div class="col-xs-9">
<a href="<?php echo get_permalink(get_option('woocommerce_myaccount_page_id')); ?>">
<i class="fa fa-user" aria-hidden="true"></i>
<span class="text-white">My account</span>
</a>
</div>
</div>
</div>
</div>
</nav>
<nav class="navbar" id="menu-shortcut">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav col-lg-12 text-center">
<li class="col-lg-4 col-md-4 text-left">text</li>
<li class="col-lg-4 col-md-4">text</li>
<li class="col-lg-4 col-md-4 text-right"><a class="toggle-modal" href="javascript:void(0);">Sign up </a></li>
</ul>
</div>
</div>
</nav>
</header>
I am also using Jquery the code is below, there is no jquery conflict in my code everything working perfectly only getting the issue when I am browsing form iPad
$('#main-menu .navbar-header .col-xs-6:first-child, #main-menu .navbar-header button').click(function()
{
if($(this).children('button').attr('class') == "navbar-toggle collapsed")
{
$(this).parents('.container').children('#main-menu-collapse').addClass('in');
$(this).parents('.container').children('#main-menu-collapse').slideDown('fast', function() {
});
$(this).children('button').html("");
$(this).children('button').css({
'min-width' : '44px',
'min-height' : '34px'
});
$(this).children('button').attr('aria-expanded', 'true');
$(this).children('button').removeClass('collapsed');
}else
{
$(this).children('button').addClass('collapsed');
$(this).parents('.container').children('#main-menu-collapse').slideDown('fast', function() {
});
$(this).parents('.container').children('#main-menu-collapse').css('display', 'none');
$(this).children('button').attr('aria-expanded', 'false');
$(this).parents('.container').children('#main-menu-collapse').removeClass('in');
$(this).children('button').css({
"margin-top" : "11px",
'background' : 'none'
});
$(this).children('button').html('<span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>');
}
});
.click() does not happen in Safari unless the element it is bound on is a legitimate click event receiver (target) in Apple's own implementation of web standard (which differs from current web standard).
The simplest way to make any element become a "legitimate" click event target is to add
cursor: pointer;
to it.
Other workarounds include using different events, such as touchstart, tap or input, depending on case.
So, in your case, a fix would be to add this to your CSS:
#main-menu .navbar-header .col-xs-6:first-child,
#main-menu .navbar-header button {
cursor: pointer;
}
Or to change the wrapper to:
$('#main-menu .navbar-header .col-xs-6:first-child, #main-menu .navbar-header button')
.on('click touchstart', function(){
// your code here
})
In my opinion, you should remove wordpress, wordpress-theming and wp-nav-walker from the question as they are irrelevant to the bug and perhaps add safari, ios and/or ipad to it.
I have a responsive webapp which uses bootstrap. When mobile-size a hamburger menu shows in the header.
When clicked on a pc/mac/android phone it displays correctly.. But when clicked with iOS-Safari, it shows up for a quarter of a second, and hides again. I suspect this is a height or z-index issue but I'm not sure, and I have not been able to solve it.
You can try for yourself on www.gjovikhk.no.
Anyways.. here is the HTML code for the header and menu :
<div id="menu" class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div id="logo" class="logo-placeholder">
<a href='Default.aspx'>
<img runat="server" id="imgClubLogo" src="" /></a>
</div>
</div>
<div class="navbar-collapse collapse" style="z-index:9999999999">
<ul class="nav navbar-nav navbar-left menu-row" style="margin-top: 5px;">
<li class="nav">
<asp:LinkButton runat="server" ID="lnkLoginMobile" Text="Login" href="/Login" />
</li>
<li class="nav">
<asp:LinkButton runat="server" href="/ViewAboutUs" ID="lnkAboutUsMobile" Text="Om GHK" />
</li>
<li class="nav">
<i style="padding-right: 5px" class="glyphicon glyphicon-star-empty"></i>Mitt lag
</li>
<li class="nav">
<i style="padding-right: 5px" class="glyphicon glyphicon-star-empty gly-spin"></i> Trenerforum
</li>
<li class="nav">
<div style="float: left; color: lightyellow; width: 18px; padding-top: 16px" class="glyphicon glyphicon-star-empty" runat="server" id="starPersonalMobile" clientidmode="Static" visible="False"> </div>
<div style="float: left">
<div class="dropdown" runat="server" id="ddlPersonalMobile" clientidmode="Static" visible="False" style="display: inline-block">
<a class="dropdown-toggle" id="menu3mobile" data-toggle="dropdown" style="color:darkgreen!important">
Mine lag
</a>
<ul class="nav navbar-nav dropdown-menu" role="menu" aria-labelledby="menu1">
<asp:ListView runat="server" ID="lvCoachesTeamsMobile" ItemType="Servicelayer.Team" OnItemCommand="lvTeams_OnItemCommand">
<ItemTemplate>
<li role="presentation">
<asp:LinkButton runat="server" ID="lnkNavDep" style="color:darkgreen!important" Text='<%# Item.Name %>' CommandArgument='<%# Item.Id %>' CommandName="NavigateToTeam" />
</li>
</ItemTemplate>
</asp:ListView>
</ul>
</div>
</div>
</li>
<li class="nav">
<asp:LinkButton runat="server" href="/TeamOverview" ID="lnkTeamOverview" Text="Lag" />
</li>
<li class="nav">
<asp:LinkButton Visible="False" runat="server" href="/AdminPage" ID="lnkAdminPage" Text="Admin" />
</li>
<li class="nav" style="display: none">
<asp:LinkButton Visible="False" runat="server" href="/EventCalendar" ID="lnkTeamOverviewMobile" Text="Eventkalender" />
</li>
<li class="nav">
<asp:LinkButton runat="server" ID="lnkLogoutMobile" Text="Logg ut" OnClick="lnkLogoutMobile_OnClick" Visible="False" />
</li>
</ul>
</div>
<div class="navbar-icon-topright">
<div style="float: right; margin-top: -8px; margin-right: 10px">
<button id="contacttrigger" type="button" class="btn btn-warning btn-circle btn-lg contact-trigger"><i class="glyphicon glyphicon-earphone"></i></button>
<%--<img id="contacttrigger" src="Content/Images/icon-contact.png">--%>
<asp:LoginView runat="server" ViewStateMode="Disabled" ID="loginView">
<LoggedInTemplate>
<ul class="nav navbar-nav navbar-right">
<li><a runat="server" href="~/UserConfig.aspx" title="Manage your account">
<div style="float: left">
<div class="avatar-container" style="height: 30px; width: 30px; margin-top: -5px">
<img class="avatar" runat="server" id="loginAvatar" src="" style="height: 30px; width: 30px" />
</div>
</div>
<div style="float: left; padding-left: 10px; color: #333">
Hei <%: Context.User.Identity.GetUserName() %> <span class="btn btn-success btn-xs glyphicon glyphicon-user"></span>
</div>
</a></li>
</ul>
</LoggedInTemplate>
</asp:LoginView>
</div>
</div>
</div>
Try this, with corresponding media queries and/or extra selectors to affect only responsive and/or only iPhone, as precise as you need:
.collapse.in {
overflow: hidden;
}
I am using a free Bootstrap landing page theme, on my current site the code snippet and be run from below, which gives the desired effect on Chrome with Parallax and images. But, there are two issues which I am not able to figure out the reason for:
1.[Solved] In IE, all the sections of the page are displaying fine and Parallax works, but the content for those section is just all displaying on 1st section.
Solution : The v-center class , was causing this issue as pointed by #Fester . Removed it from the markup, and issue fixed but no solution found yet.
Un - Solved Issue
On iOS, the background image is scaled to much and just a bit from the center is displayed. Works fine on iMac, not on iPhone or iPad.
Please bear in mind I am new to CSS and trying to work my way thru, and have tried a few things suggested on different questions for the iOS issue but it does not work. The CSS is not minified, so can be easily viewed.
PS: I know, I need to try something first before asking the question but being a developer not a clue on where to start. Even a bit of pointer will be much appreciated.
Edit 1: Tried modernizr with HTML5shiv but still giving the same issue. Just included the modernizr and HTML5shiv js file. No changes were made to the code.
EDIT 2: The Issue with IE was caused by v-center class. Removed it, and everything fine. But, now actual reason or solution found.
Code is As Below:
/* activate scrollspy menu */
$('body').scrollspy({
target: '#navbar-collapsible',
offset: 52
});
/* smooth scrolling sections */
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - 50
}, 800);
if (this.hash=="#section1") {
$('.scroll-up').hide();
}
else {
$('.scroll-up').show();
}
// activte animations in this section
target.find('.animate').delay(1200).addClass("animated");
setTimeout(function(){
target.find('.animated').removeClass("animated");
},2000);
return false;
}
}
});
#import url(http://fonts.googleapis.com/css?family=Lato:300,400);
#import url(http://fonts.googleapis.com/css?family=Bitter:400);
html,body {
height:100%;
background:center no-repeat fixed url('http://dd.e-wizardbathrooms.co.uk/background.jpg');
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size:cover;
color:#444;
font-family: 'Lato', sans-serif;
}
#media (min-width:768px) {
h1 {
font-size:68px;
}
}
a {
color:#999;
}
a:hover {
color:#111;
}
.btn,.well,.panel {
border-radius:0;
}
.btn-danger {
background-color:#f44d3c;
}
.btn-main {
color: #ffffff !important;
border-radius: 10px;
background-color: rgba(244,77,60,0.7);
padding-bottom: 10px;
}
.text-danger, a.text-danger {
color:#f44d3c;
}
.btn-huge {
padding:17px 22px;
font-size:22px;
}
.lato {
font-family: 'Lato', sans-serif;
}
.bitter {
font-family: 'Bitter', serif;
}
.icon-bar {
background-color:#fff;
}
.navbar-trans {
background-color:#273a60;
color:#cdcdcd;
border-width:0;
}
.navbar-trans .navbar-brand, .navbar-trans >.container-fluid .navbar-brand {
padding: 14px;
color:#cdcdcd;
}
.navbar-trans li>a:focus,.navbar-trans li.active {
background-color:#f44d3c;
color:#333;
}
.navbar-trans li>a:hover {
background-color:#f44d3c;
color:#fff;
opacity:0.5;
}
.navbar-trans a{
color:#cdcdcd;
letter-spacing:1px;
}
.navbar-trans .form-control:focus {
border-color: #eee;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(100,100,100,0.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(100,100,100,0.6);
}
.scroll-down {
position: absolute;
left: 50%;
bottom: 40px;
border: 2px solid #fff;
border-radius: 50%;
height: 50px;
width: 50px;
margin-left: -15px;
display: block;
padding: 7px;
text-align: center;
z-index:-1
}
.scroll-up {
position: fixed;
display: none;
z-index: 999;
bottom: 2em;
right: 2em;
}
.scroll-up a {
background-color: rgba(135, 135, 135, 0.5);
display: block;
width: 35px;
height: 35px;
text-align: center;
color: #fff;
font-size: 15px;
line-height: 30px;
}
section {
padding-top:70px;
padding-bottom:50px;
min-height:100%;
min-height:calc(100% - 0);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#media (min-width:768px) {
.v-center {
height: 50%;
overflow: visible;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
}
#section1, #section3 {
background-color: rgba(0,0,0,0.3);
color:#fff;
font-family: 'Bitter', serif;
}
#section4 {
background-color: #f6f6f6;
color:#444;
}
#section2 {
background-color: #fff;
}
#section3 {
background-color: rgba(0,0,0,0.9);
}
#section5 {
background-color: #fff;
}
#section6 {
background-color: #eee;
min-height:130px;
padding-top:40px;
padding-bottom:40px;
}
#section7 {
background-color: #273a60;
color: #f6f6f6;
min-height:130px;
padding-top:40px;
padding-bottom:40px;
}
footer {
background-color:#2b2b2b;
color:#ddd;
min-height:100px;
padding-top:20px;
padding-bottom:40px;
}
footer .nav>li>a {
padding: 3px;
color: #f44d3c;
}
footer .nav>li>a:hover {
background-color:transparent;
color:#fff;
}
<!DOCTYPE html>
<html>
<head>
<title>David Dixon Garden Machinery</title>
<meta charset="utf-8">
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body >
<nav class="navbar navbar-trans navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">David Dixon</a>
</div>
<div class="navbar-collapse collapse" id="navbar-collapsible">
<ul class="nav navbar-nav navbar-left">
<li>Home</li>
<li>Information</li>
<li>About Us</li>
<li>Contact Us</li>
<li> </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><strong>Phone: </strong>01434-606060</li>
<li><strong>E-Mail:</strong>info#daviddixons.co.uk</li>
</ul>
</div>
</div>
</nav>
<section class="container-fluid" id="section1">
<div class="v-center">
<h1 class="text-center">David Dixon</h1>
<h2 class="text-center lato animate slideInDown"><b>Garden Machinery</b></h2>
<h4 class="text-center lato animate slideInDown">Please Select one of the Following or Scroll Down for More Info.</h4>
<p class="text-center">
<br>
Online Shop
Servicing & Parts
Equipment Hire
</p>
</div>
<a href="#section2">
<div class="scroll-down bounceInDown animated">
<span>
<i class="fa fa-angle-down fa-2x"></i>
</span>
</div>
</a>
</section>
<section class="container-fluid" id="section2">
<div class="container v-center">
<div class="row">
<div class="col-sm-4">
<div class="row">
<div class="col-sm-12 text-center">
<div class="panel panel-default slideInLeft animate">
<div class="panel-heading">
<h3>Online Shop</h3></div>
<div class="panel-body">
<p>
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
</p>
<hr>Go
<hr>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4 text-center">
<div class="row">
<div class="col-sm-12 text-center">
<div class="panel panel-default slideInUp animate">
<div class="panel-heading">
<h3>Servicing & Parts</h3></div>
<div class="panel-body">
<p>
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
</p>
<hr>Go
<hr>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4 text-center">
<div class="row">
<div class="col-sm-12 text-center">
<div class="panel panel-default slideInRight animate">
<div class="panel-heading">
<h3>Equipment Hire</h3></div>
<div class="panel-body">
<p>
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
</p>
<hr>Go
<hr>
</div>
</div>
</div>
</div>
</div>
</div>
<!--/row-->
<div class="row">
<br>
</div>
</div>
<a href="#section3">
<div class="scroll-down bounceInDown animated">
<span>
<i class="fa fa-angle-down fa-2x"></i>
</span>
</div>
</a>
<!--/container-->
</section>
<section class="container-fluid" id="section3">
<h1 class="text-center">David Dixon</h1>
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<h3 class="text-center lato slideInUp animate">The Best for <strong>Garden and Forest Machinery</strong> in the North East.</h3>
<br>
<div class="row">
<div class="col-xs-4 col-xs-offset-1">Additional Information about David Dixon Company and History</div>
<div class="col-xs-2"></div>
<div class="col-xs-4 text-right">Additional Information about David Dixon Company and History</div>
</div>
<br>
<p class="text-center">
<img src="//placehold.it/10x10/444/FFF" class="img-responsive thumbnail center-block ">
</p>
</div>
</div>
<h3 class="text-center">Brands we Work with</h3>
<div class="row">
<div class="col-sm-2 col-sm-offset-2 col-xs-6">
<div class="text-center">
<a href="">
<img style="width:200px;" class="img-circle img-responsive img-thumbnail" src="//placehold.it/200/444">
</a>
<h3 class="text-center"></h3>
</div>
</div>
<div class="col-sm-2 col-xs-6">
<div class="text-center">
<a href="">
<img style="width:200px;" class="img-circle img-responsive img-thumbnail" src="//placehold.it/200/444">
</a>
<h3 class="text-center"></h3>
</div>
</div>
<div class="col-sm-2 col-xs-6">
<div class="text-center">
<a href="">
<img style="width:200px;" class="img-circle img-responsive img-thumbnail" src="//placehold.it/200/444">
</a>
<h3 class="text-center"></h3>
</div>
</div>
<div class="col-sm-2 col-xs-6">
<div class="text-center">
<a href="">
<img style="width:200px;" class="img-circle img-responsive img-thumbnail" src="//placehold.it/200/444">
</a>
<h3 class="text-center"></h3>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-2 col-sm-offset-2 col-xs-6">
<div class="text-center">
<a href="">
<img style="width:200px;" class="img-circle img-responsive img-thumbnail" src="//placehold.it/200/444">
</a>
<h3 class="text-center"></h3>
</div>
</div>
<div class="col-sm-2 col-xs-6">
<div class="text-center">
<a href="">
<img style="width:200px;" class="img-circle img-responsive img-thumbnail" src="//placehold.it/200/444">
</a>
<h3 class="text-center"></h3>
</div>
</div>
<div class="col-sm-2 col-xs-6">
<div class="text-center">
<a href="">
<img style="width:200px;" class="img-circle img-responsive img-thumbnail" src="//placehold.it/200/444">
</a>
<h3 class="text-center"></h3>
</div>
</div>
<div class="col-sm-2 col-xs-6">
<div class="text-center">
<a href="">
<img style="width:200px;" class="img-circle img-responsive img-thumbnail" src="//placehold.it/200/444">
</a>
<h3 class="text-center"></h3>
</div>
</div>
</div>
<a href="#section4">
<div class="scroll-down bounceInDown animated">
<span>
<i class="fa fa-angle-down fa-2x"></i>
</span>
</div>
</a>
</section>
<section id="section4">
<div class="container v-center">
<div class="row">
<div class="col-md-12">
<h1 class="text-center">Contact US</h1>
<hr>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="row form-group">
<div class="col-sm-5">
<input type="text" class="form-control" id="firstName" name="firstName" placeholder="First Name" required="">
</div>
<div class="col-sm-5">
<input type="text" class="form-control" id="lastName" name="lastName" placeholder="Last Name" required="">
</div>
</div>
<div class="row form-group">
<div class="col-sm-5">
<input type="email" class="form-control" name="email" placeholder="Email" required="">
</div>
<div class="col-sm-5">
<input type="text" class="form-control" name="phone" placeholder="Phone" required="">
</div>
</div>
<div class="row form-group">
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Message" required="">
</div>
</div>
<div class="row form-group">
<div class="col-sm-10">
<button class="btn btn-default btn-lg pull-right">Send Message</button>
</div>
</div>
</div>
<div class="col-sm-3">
<address>
<strong>Opening Hours:</strong><br>
Monday to Friday: 8am - 5pm<br>
Saturday: 8.30am - 12.30pm<br>
</address>
<address>
<strong>Phone: </strong>01434-606060
</address>
</div>
<div class="col-sm-3 pull-right">
<address>
<strong>David Dixon Ltd.</strong><br>
18, Haugh Lane Industrial Estate<br>
Hexham, Norhtumberland<br>
United Kingdom - NE46 3PU<br>
</address>
<address>
<strong>Email Us</strong><br>
info#daviddixons.co.uk
</address>
</div>
</div>
<div class="row">
<div class="row"> </div>
<a href="#">
<div class="col-sm-2 col-sm-offset-3 col-xs-4 text-center">
<i class="fa fa-facebook fa-4x"></i>
</div>
</a>
<a href="#">
<div class="col-sm-2 col-xs-4 text-center">
<i class="fa fa-google-plus fa-4x"></i>
</div>
</a>
<a href="#">
<div class="col-sm-2 col-xs-4 text-center">
<i class="fa fa-twitter fa-4x"></i>
</div>
</a>
</div>
</div>
</section>
<footer id="footer">
<div class="container">
<!--/row-->
<p class="text-center">David Dixons Ltd. ® 2015</p>
</div>
</footer>
<div class="scroll-up">
<i class="fa fa-angle-up"></i>
</div>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css" rel="stylesheet" type="text/css" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<!--scripts loaded here-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="scripts.js"></script>
</body>
</html>
I have the code, I need it to get a csv file with the following contents.
src of img.myImg; content of EAN: Z88799010290
I tried, but no luck how merge two foreach:
foreach($html->find('img.myImg') as $e)
echo $e->src . '<br>;';
foreach($html->find('div.EANN') as $ean)
echo $ean. ';<br>';
<div id="wybr_45" alt="-8204" class="listProduct"><div id="d4b">
<div class="fl fotoimage">
<div class="listLink1"> <a href="#" onclick="changeData('popshop','Mainframe','showModuleNew','DeepProductSelect',1234,1234);" >
<img src="http://example/script.php?a=87x112&t=B2B.BSDTrade&i=-441" class="myImg" alt="w"/> </a>
</div>
</div>
<div class="fl descriptionColumn">
<div class="lpTitle2 listName"><b> GATTA: MICHELLE LOVE pończochy samonośne wz.03</b></div>
<div class="lpTitle2"><!-- <a href="#" >brak opisu </a> --></div>
<span class="lpTitle2">Kod:</span><b>-8204</b>
<div class="EANN">000245035190</div><div class="lpTitle2 producer">Producent: <a style="font-size: 12px; color: #555;" href="#">GATTA</a></div>
</div>
<div class="marketIndex">
<div class="priceColumn"> <span class="oldPrice1">
</span></div>
<div class="OrderCpl"><span class="addtoOrderL" onclick="deepProductTable_showForProduct(-8204);" >
<span onclick="deepProductTable_showForProduct(-8204);" class="addtobasket"/> </span></div>
</div></div></div>
Result:
http://example/script.php?a=87x112&t=B2B.BSDTrade&i=-723;000937090290